grommet
components

FormField

a single field in a form

Storybook
CodeSandbox

Props

component

The component to insert in the FormField. Grommet will add update the form values when this field changes. Any additional properties (such as initial value) you pass to FormField will be forwarded to this component. The component may be custom as long it supports the properties of name, value, onChange (event => {}), while event has either event.value or event.target.value.

"function""object"

error

Any error text describing issues with the field
"string""node"

help

Any help text describing how the field works
"string""node"

htmlFor

The id of the input element contained in this field
"string"

label

A short label describing the field
"string""node"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

name

The name of the value data when in a Form and the name of the input field.

"string"

pad

Whether to add padding to align with the padding of TextInput.
truefalse

required

Whether the field is required.
truefalse

validate

Validation rule when used within a grommet Form. Provide a regular expression or a function. If a function is provided, it will be called with two arguments, the value for this field and the entire value object. This permits validation to encompass multiple fields. The function should return a string message describing the validation issue, if any.

"function"
{
regexp:
"object,"
message: string
}

Theme

formField.border.color

The border color.
"border"

formField.border.error.color

The border color of the error.
{
  "dark": "white",
  "light": "status-critical"
}

formField.border.position

The border position.
"inner"

formField.border.side

The border side of the FormField.
"bottom"

formField.content.pad

The pad of the FormField content.
{
  "horizontal": "small",
  "bottom": "small"
}

formField.error.color

The color of the FormField error.
{
  "dark": "status-critical",
  "light": "status-critical"
}

formField.error.margin

The margin used for the FormField error.
{
  "vertical": "xsmall",
  "horizontal": "small"
}

formField.extend

Any additional style for FormField.
"any CSS"
(props) => {}

formField.help.color

The color of the FormField help.
{"dark": "dark-3", "light": "dark-3"}

formField.help.margin

The margin for the FormField help.
{"left": "small"}

formField.label

Any props of Text that will be applied on the FormField label.
{
  "margin": {
    "vertical": "xsmall",
    "horizontal": "small"
  }
}

formField.label.margin

The margin for the FormField label.
{
  "vertical": "xsmall",
  "horizontal": "small"
}

formField.margin

The margin of FormField.
{"bottom": "small"}

global.borderSize

The possible border sizes for FormField.
{
  "xsmall": "1px",
  "small": "2px",
  "medium": "4px",
  "large": "12px",
  "xlarge": "24px"
}