Custom label to be used by screen readers. Should only be provided if FormField has no children. When a11yTitle is provided an aria-label will be added to the element if it has no children.
"a user friendly label for screen readers"
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.
Any valid Box property. These properties are applied to the FormField contents container and will override properties from the theme.
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": "..."
}
Validation rule when used within a grommet Form. Provide an object with a regular expression, a function, or an array of these. 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, or an object with 'message' and 'status' properties.
{
"dark": "white",
"light": "status-critical"
}
"status-disabled"
"medium"
Any valid Box props for the container surrounding the error message and icon.
Any valid Box props for the container surrounding the info message and icon.
{
"vertical": "xsmall",
"horizontal": "small"
}
{
"vertical": "xsmall",
"horizontal": "small"
}
{
"margin": {
"vertical": "xsmall",
"horizontal": "small"
}
}
{
"vertical": "xsmall",
"horizontal": "small"
}
Whether an asterisk (*) indicating that an input is required should be displayed adjacent to the FormField's label. If providing a custom element, for accessibility it is recommended that you include an a11yTitle of "required" to assist screen readers. If using "true", the a11yTitle is automatically applied.