Field

/

Documentation

Field

Provides context and semantic structure for form inputs, including labels, descriptions, and error messages.

Props

NameTypeDefaultDescription
validate
select
-Field validation behavior
disabled
boolean
-Disable the field
invalid
boolean
-Field is in invalid state

Stories

Default
Basic field with input
With Description
Field with helper text

This will be your display name on the platform.

With Error
Field showing validation error
With Validity
Field with validity
{
  "state": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  },
  "error": "",
  "errors": [],
  "value": null,
  "initialValue": null,
  "validity": {
    "badInput": false,
    "customError": false,
    "patternMismatch": false,
    "rangeOverflow": false,
    "rangeUnderflow": false,
    "stepMismatch": false,
    "tooLong": false,
    "tooShort": false,
    "typeMismatch": false,
    "valid": null,
    "valueMissing": false
  }
}
Required Field
Field with required indicator
Textarea Field
Field with textarea

Write a short bio. Maximum 500 characters.

Select Field
Field with select dropdown
Checkbox Field
Field with checkbox

You must agree to continue with registration.

Switch Field
Field with toggle switch

Receive emails about your account activity.

Complete Form Example
Multiple fields in a form layout

We'll never share your email with anyone else.

Disabled State
Field in disabled state

This field is currently disabled.