Inputs
Switch
Ink track, spring-driven thumb that stretches while pressed. Instant under reduced motion.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { Field } from "@nibapp/ui/components/field";import { Switch } from "@nibapp/ui/components/switch";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
Field
Label + control + description + error in one.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | |
| hint | ReactNode | — | Muted trailing text in the label row — "Optional", a character count… |
| description | ReactNode | — | |
| error | ReactNode | — | Forces the field invalid and shows this message. Omit to show the browser's validation message after Base UI validates the control. |
| orientation | "vertical" | "horizontal" | "vertical" | `vertical` stacks label → control → description. `horizontal` puts the copy on the left and the control on the right — the settings-row layout for switches and compact selects. |
| nativeLabel | boolean | true | Set to `false` for button controls (Select, Combobox trigger) so clicking the label focuses rather than presses the trigger. |
| children (required) | ReactNode | — |
Also takes the props of Base UI's Field.Root, except children.
Switch
Ink toggle with a springy thumb that stretches while pressed.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" |
|
| label | ReactNode | — | Visible label to the right of the switch. For settings rows prefer <Field orientation="horizontal">. |
| description | ReactNode | — |
Also takes the props of Base UI's Switch.Root, except children.