Components
FormFieldSet
A unified form field component that renders any of 17 field types (text, select, datepicker, etc.) with built-in labels, validation, and error handling. Use inside a <Form> for context-driven validation.
Complete Form
Build a working form with <Form> wrapping multiple <FormFieldSet> components. The Form component provides validation context and collects all field values on submit.
Validation & Error States
Each field supports validation rules with custom error messages. Errors display below the field when touched. The Form component manages state across all fields.
Field Types Gallery
FormFieldSet renders any of 17 field types via the <code>type</code> prop. Below is every supported type in action.
Interactive Playground
Controls
Preview
Generated Code
<FormFieldSet />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | FormFieldType | "text" | The field type to render. One of: text, number, url, search, color, password, email, textarea, select, radio, checkbox, switch, datepicker, phone, range, otp, file. |
| name | string | — | Field name — used as the key in form data and for validation context. |
| label | ReactNode | — | Label text or element displayed above or floating over the input. |
| description | ReactNode | — | Helper text displayed below the field. |
| size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Control size. |
| variant | "default" | "soft" | "underline" | "default" | Visual style variant. |
| color | "default" | "primary" | "info" | "success" | "warning" | "danger" | "secondary" | "default" | Color accent for the field. |
| colorDepth | number | 500 | Color intensity (50–950). |
| labelPlacement | "top" | "floating" | "top" | Where the label renders. Switch also supports 'left' and 'right'. |
| validation | FieldValidation | — | Validation rules and error messages. e.g. { rules: { required: true, email: true }, message: { email: 'Invalid email' } }. |
| error | ReactNode | — | Error message to display. When set, field is visually errored. |
| touched | boolean | false | Whether the field has been interacted with. Shows error only when touched + error is set. |
| disabled | boolean | false | Disable the input element. |
| id | string | — | HTML id attribute. Auto-generated if omitted. |
| placeholder | string | — | Placeholder text (text-like types only). |
| required | boolean | false | HTML required attribute (use validation.rules.required for validation). |
| options | SelectOption[] | — | Array of { label, value } options for select, radio, and checkbox types. |
| native | boolean | false | Use native <select> instead of custom dropdown (select only). |
| strongPassword | object | — | Strong password config: { minLength, minUpper, minLower, minNumber, minSpecial }. |
| revealToggle | boolean | true | Show/hide password visibility toggle button. |
| rows | number | 3 | Number of visible text rows (textarea only). |
| showLengthCounter | boolean | false | Show character count below the textarea. |
| range | boolean | false | Enable range selection (start/end dates). |
| withTime | boolean | false | Include time picker in the date selection. |
| showPresets | boolean | true | Show preset date ranges (Today, This Week, etc.). |
| displayFormat | "pretty" | "iso" | "pretty" | Date display format. |
| clearable | boolean | true | Show a clear button to reset the date. |
| minDate | Date | string | — | Minimum selectable date. |
| maxDate | Date | string | — | Maximum selectable date. |
| blockedDates | Array<Date | string> | — | Dates that cannot be selected. |
| monthsToShow | 1 | 2 | 1 | Number of calendar months to display. |
| length | number | 4 | Number of OTP digit inputs. |
| format | "digits" | "alphanumeric" | "digits" | Allowed character format. |
| ui | "segmented" | "single" | "segmented" | OTP UI style — separate boxes or single input. |
| accept | string | — | Accepted file MIME types, e.g. 'image/*'. |
| multiple | boolean | false | Allow multiple file selection. |
| maxFiles | number | — | Maximum number of files. |
| maxFileSize | number | — | Maximum file size in bytes. |
| ui | "inline" | "dropzone" | "inline" | File field UI variant. |
| preview | "none" | "thumbnails" | "thumbnails" | File preview mode. |
| dropLabel | string | "Drag & drop files here" | Text shown in dropzone area. |
| browseLabel | string | "Browse files" | Button label for file browser. |
| defaultCountryCode | string | "us" | Default country code (ISO 3166-1 alpha-2). |
| countryCodeMode | "select" | "hidden" | "select" | Show country code selector or auto-detect. |
| numbersOnly | boolean | false | Only allow numeric characters. |
| phonePlaceholder | string | — | Placeholder for the phone number input. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Step increment. |
| showValue | boolean | true | Display the current value as a label. |
| marks | number[] | — | Array of tick mark values along the slider. |
| selection | "single" | "range" | "single" | Single value or range selection. |
| checked | boolean | — | Controlled checked state. |
| defaultChecked | boolean | false | Default checked state (uncontrolled). |
| showStateText | boolean | false | Show on/off text labels next to the switch. |
| checkedText | ReactNode | "On" | Text shown when switch is on. |
| uncheckedText | ReactNode | "Off" | Text shown when switch is off. |
| stateTextPlacement | "before" | "after" | "both" | "after" | Where state labels render relative to the switch. |
| labelPlacement | "top" | "left" | "right" | "floating" | "top" | Label position (switch supports left/right in addition to top/floating). |
| radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | "md" | Border radius of the input. |
| rounded | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | — | Alternative radius alias. |
| startIcon | ReactNode | — | Icon/element at the start of the input. |
| endIcon | ReactNode | — | Icon/element at the end of the input. |
| prefix | ReactNode | — | Text prefix inside the input before the value. |
| suffix | ReactNode | — | Text suffix inside the input after the value. |
| min | number | — | Minimum allowed value. |
| max | number | — | Maximum allowed value. |
| step | number | 1 | Step increment for the control. |
FormFieldType
The field type to render. One of: text, number, url, search, color, password, email, textarea, select, radio, checkbox, switch, datepicker, phone, range, otp, file.
string
Field name — used as the key in form data and for validation context.
ReactNode
Label text or element displayed above or floating over the input.
ReactNode
Helper text displayed below the field.
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Control size.
"default" | "soft" | "underline"
Visual style variant.
"default" | "primary" | "info" | "success" | "warning" | "danger" | "secondary"
Color accent for the field.
number
Color intensity (50–950).
"top" | "floating"
Where the label renders. Switch also supports 'left' and 'right'.
FieldValidation
Validation rules and error messages. e.g. { rules: { required: true, email: true }, message: { email: 'Invalid email' } }.
ReactNode
Error message to display. When set, field is visually errored.
boolean
Whether the field has been interacted with. Shows error only when touched + error is set.
boolean
Disable the input element.
string
HTML id attribute. Auto-generated if omitted.
string
Placeholder text (text-like types only).
boolean
HTML required attribute (use validation.rules.required for validation).
SelectOption[]
Array of { label, value } options for select, radio, and checkbox types.
boolean
Use native <select> instead of custom dropdown (select only).
object
Strong password config: { minLength, minUpper, minLower, minNumber, minSpecial }.
boolean
Show/hide password visibility toggle button.
number
Number of visible text rows (textarea only).
boolean
Show character count below the textarea.
boolean
Enable range selection (start/end dates).
boolean
Include time picker in the date selection.
boolean
Show preset date ranges (Today, This Week, etc.).
"pretty" | "iso"
Date display format.
boolean
Show a clear button to reset the date.
Date | string
Minimum selectable date.
Date | string
Maximum selectable date.
Array<Date | string>
Dates that cannot be selected.
1 | 2
Number of calendar months to display.
number
Number of OTP digit inputs.
"digits" | "alphanumeric"
Allowed character format.
"segmented" | "single"
OTP UI style — separate boxes or single input.
string
Accepted file MIME types, e.g. 'image/*'.
boolean
Allow multiple file selection.
number
Maximum number of files.
number
Maximum file size in bytes.
"inline" | "dropzone"
File field UI variant.
"none" | "thumbnails"
File preview mode.
string
Text shown in dropzone area.
string
Button label for file browser.
string
Default country code (ISO 3166-1 alpha-2).
"select" | "hidden"
Show country code selector or auto-detect.
boolean
Only allow numeric characters.
string
Placeholder for the phone number input.
number
Minimum value.
number
Maximum value.
number
Step increment.
boolean
Display the current value as a label.
number[]
Array of tick mark values along the slider.
"single" | "range"
Single value or range selection.
boolean
Controlled checked state.
boolean
Default checked state (uncontrolled).
boolean
Show on/off text labels next to the switch.
ReactNode
Text shown when switch is on.
ReactNode
Text shown when switch is off.
"before" | "after" | "both"
Where state labels render relative to the switch.
"top" | "left" | "right" | "floating"
Label position (switch supports left/right in addition to top/floating).
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Border radius of the input.
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Alternative radius alias.
ReactNode
Icon/element at the start of the input.
ReactNode
Icon/element at the end of the input.
ReactNode
Text prefix inside the input before the value.
ReactNode
Text suffix inside the input after the value.
number
Minimum allowed value.
number
Maximum allowed value.
number
Step increment for the control.