Inputs
Checkbox
Ink fill with a check that draws itself on. In a CheckboxGroup, a parent checkbox checks or clears them all and shows the mixed state when only some are on.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
tsx
import { Checkbox, CheckboxGroup } from "@nibapp/ui/components/checkbox";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.
Checkbox
Ink checkbox with a drawn-on check. Pass `label` for the common box + text composition.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | |
| label | ReactNode | — | Visible label rendered to the right; clicking it toggles the box. |
| description | ReactNode | — | Secondary line under the label. |
Also takes the props of Base UI's Checkbox.Root, except children.
CheckboxGroup
Shares a `string[]` value across child checkboxes (each needs a `value`).
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "vertical" |
Also takes .