Forms
FormFieldSet type="radio" -- single-select radio group.
Options are a fixed showcase list (Free/Pro/Enterprise) -- the common controls below still apply.
| Prop | Type | Default | Description |
|---|---|---|---|
options | Array<{ label: ReactNode; value: string; disabled?; key? }> | — | Items in the group. |
value / defaultValue | string | — | Controlled / uncontrolled selection. |
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. |
options
Array<{ label: ReactNode; value: string; disabled?; key? }>
Default: —
Items in the group.
value / defaultValue
string
Default: —
Controlled / uncontrolled selection.
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: string) => void | — | Called with the next selected value. |
onChange
(next: string) => void
Default: —
Called with the next selected value.
| 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 |
|---|---|---|---|
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>). |
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 |
|---|---|---|---|
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 |
|---|---|---|---|
disabled | boolean | false | Disables the control. |
required | boolean | false | Marks the field required. |
Radio (standalone) | component | — | A single radio outside a group -- checkbox-shaped (checked/defaultChecked/onChange(checked: boolean)), no labelPlacement. Not part of FormFieldSet's type dispatch (import { Radio } directly). |
disabled
boolean
Default: false
Disables the control.
required
boolean
Default: false
Marks the field required.
Radio (standalone)
component
Default: —
A single radio outside a group -- checkbox-shaped (checked/defaultChecked/onChange(checked: boolean)), no labelPlacement. Not part of FormFieldSet's type dispatch (import { Radio } directly).
| 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.