FormField
Provide context to your form elements
FormField#
| Attribute | Type | Description | Default |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | null |
| disabled | boolean | - | null |
| readOnly | boolean | - | null |
| name | string | The name of the input. Submitted with its owning form as part of a name/value pair. | null |
| state | "error" | "success" | "alert" | The validation state of the input. | null |
| isRequired | boolean | If true, the form field will be required. | null |
FormField.Label#
Label to attach to the associated input to describe it and give it an accessible name.
| Attribute | Type | Description | Default |
| requiredIndicator | ReactNode | Element shown when the input is required inside the label. | <FormFieldRequiredIndicator /> |
| asChild | boolean | - | null |
Status messages#
FormField.HelperMessage#
Help users by showing an helper message below an input.
This component does not have any props
FormField.SuccessMessage#
Help users by showing an success message below an input. Indicates the input has been successfully filled in by the user.
This component does not have any props
FormField.AlertMessage#
Help users by showing an alert message (warning) below an input. For example: a password input with an insecure password.
This component does not have any props
FormField.ErrorMessage#
Help users by showing an error message below an input. Indicated the input has not been successfully filled in by the user.
This component does not have any props
FormField.Control#
This higher order component gives you access to the internal state of the field. Wrap an input with it to get access to the state. It can be used to build complex custom inputs.
This component does not have any props
FormField.RequiredIndicator#
Render it inside the FormField.Label to mark the field as mandatory (required)
This component does not have any props
FormField.CharactersCount#
Displays characters count for text inputs and textareas and the max length allowed in these components.
| Attribute | Type | Description | Default |
| value | string | Current value for the input this component belongs to. | {"value":""} |
| maxLength* | number | Maximum numeric value to be displayed. | null |