Forms
FormFieldSet type="switch" -- toggle with optional on/off state text.
| Prop | Type | Default | Description |
|---|---|---|---|
checked / defaultChecked | boolean | — | Controlled / uncontrolled checked state. |
checkedText / uncheckedText | ReactNode | "On" / "Off" | Text shown for each state (when showStateText). |
label | ReactNode | — | Field label. |
description | ReactNode | — | Helper text below the control. |
error | ReactNode | boolean | — | Error message, or true for an invalid state with no message. |
checked / defaultChecked
boolean
Default: —
Controlled / uncontrolled checked state.
checkedText / uncheckedText
ReactNode
Default: "On" / "Off"
Text shown for each state (when showStateText).
label
ReactNode
Default: —
Field label.
description
ReactNode
Default: —
Helper text below the control.
error
ReactNode | boolean
Default: —
Error message, or true for an invalid state with no message.
| Prop | Type | Default | Description |
|---|---|---|---|
onChange | (next: boolean) => void | — | Called with the next checked state. |
onChange
(next: boolean) => void
Default: —
Called with the next checked state.
| Prop | Type | Default | Description |
|---|---|---|---|
showStateText | boolean | false | Shows inline "On/Off"-style text next to the track. |
disabled | boolean | false | Disables the control. |
required | boolean | false | Marks the field required. |
showStateText
boolean
Default: false
Shows inline "On/Off"-style text next to the track.
disabled
boolean
Default: false
Disables the control.
required
boolean
Default: false
Marks the field required.
| Prop | Type | Default | Description |
|---|---|---|---|
stateTextPlacement | "before" | "after" | "both" | "after" | Where to render state text relative to the track. |
labelPlacement | "top" | "left" | "right" | "floating" | "top" | Label position relative to the control. |
colSpan | number | — | Sets `grid-column: span N` on the field wrapper — a real home for a layout hint in a spread config object (instead of leaking to the <input>). |
stateTextPlacement
"before" | "after" | "both"
Default: "after"
Where to render state text relative to the track.
labelPlacement
"top" | "left" | "right" | "floating"
Default: "top"
Label position relative to the control.
colSpan
number
Default: —
Sets `grid-column: span N` on the field wrapper — a real home for a layout hint in a spread config object (instead of leaking to the <input>).
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Control size. |
variant | "bordered" | "soft" | "filled" | "underlined" | "bordered" | Visual variant. "filled" (text types) is borderless with a neutral fill at rest, border + ring on focus; other field types fall back to "bordered". "default"/"underline" are legacy aliases. |
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | string | "default" | Semantic tone. |
colorDepth | number | 500 | Shade depth for color. |
size
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Default: "md"
Control size.
variant
"bordered" | "soft" | "filled" | "underlined"
Default: "bordered"
Visual variant. "filled" (text types) is borderless with a neutral fill at rest, border + ring on focus; other field types fall back to "bordered". "default"/"underline" are legacy aliases.
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | string
Default: "default"
Semantic tone.
colorDepth
number
Default: 500
Shade depth for color.
| Prop | Type | Default | Description |
|---|---|---|---|
wrapperClassName | string | — | Class on the field wrapper (the element that also carries colSpan), separate from `className` on the control. |
className | string | — | Class applied to the root element. |
style | CSSProperties | — | Inline styles for the root element. |
wrapperClassName
string
Default: —
Class on the field wrapper (the element that also carries colSpan), separate from `className` on the control.
className
string
Default: —
Class applied to the root element.
style
CSSProperties
Default: —
Inline styles for the root element.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | FormFieldSet fields and other form content. |
children
ReactNode
Default: —
FormFieldSet fields and other form content.
| Prop | Type | Default | Description |
|---|---|---|---|
validationMode | "blur" | "change" | "blur" | When fields are (re-)validated. |
showErrorsOn | "blur" | "change" | "blur" | When validation errors start showing. |
validateOnMount | boolean | false | Runs validation immediately on mount. |
initialValues | FormData | {} | Initial values for uncontrolled fields. |
disableAutofill | boolean | true | Adds autocomplete/autofill-defeating attributes to the form. |
validationMode
"blur" | "change"
Default: "blur"
When fields are (re-)validated.
showErrorsOn
"blur" | "change"
Default: "blur"
When validation errors start showing.
validateOnMount
boolean
Default: false
Runs validation immediately on mount.
initialValues
FormData
Default: {}
Initial values for uncontrolled fields.
disableAutofill
boolean
Default: true
Adds autocomplete/autofill-defeating attributes to the form.
| Prop | Type | Default | Description |
|---|---|---|---|
onSubmit | (formData: FormData) => void | Promise<void> | — | Called with collected field values on submit (required). |
onError | (errors: FormErrors) => void | — | Called when submit is blocked by validation errors. |
onSubmit
(formData: FormData) => void | Promise<void>
Default: —
Called with collected field values on submit (required).
onError
(errors: FormErrors) => void
Default: —
Called when submit is blocked by validation errors.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | "" | Class applied to the form element. |
className
string
Default: ""
Class applied to the form element.