Inputs
Radio
Single choice. Ink dot springs in; card variant for weighty choices such as who can join a team, with a preview across its top for a choice best shown (a theme); swatches for a colour or a picture.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { Radio, RadioCard, RadioGroup, RadioSwatch } from "@nibapp/ui/components/radio";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.
Radio
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | |
| label | ReactNode | — | |
| description | ReactNode | — |
Also takes the props of Base UI's Radio.Root, except children.
RadioCard
A whole card as one radio — for weighty choices like permission modes, or ones best shown (a theme).
| Prop | Type | Default | Description |
|---|---|---|---|
| label (required) | ReactNode | — | |
| description | ReactNode | — | |
| icon | ReactNode | — | Leading icon. |
| trailing | ReactNode | — | Trailing adornment (badge, shortcut…). |
| preview | ReactNode | — | A picture of the choice across the card's top (a theme, a layout), edge to edge; the label goes under it. Decorative: the label names the choice. |
| previewSide | "top" | "auto" | "top" | Where the preview sits: across the `top` (default), or `auto`: beside the text on the start side when the card is wide (a list of full-width cards), on top when it's narrow (cards in a row). |
Also takes the props of Base UI's Radio.Root, except children.
RadioGroup
Single choice from a set of <Radio>/<RadioCard>. Arrow keys move the selection.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "vertical" |
Also takes .
RadioSwatch
One choice shown as what it looks like — a colour or a picture — in a `RadioGroup`: a real radio (arrow keys move the choice, one tab stop), the chosen one outlined. Name each by `label`.
| Prop | Type | Default | Description |
|---|---|---|---|
| label (required) | string | — | The choice's name, its accessible name: "Teal", "Style 3". |
| color | string | undefined | — | A colour to show (any CSS colour, e.g. a token's `var(--…)`). |
| children | ReactNode | — | A picture to show instead (an avatar, an icon), sized by the caller. |
| size | "sm" | "md" | "md" |
Also takes the props of Base UI's Radio.Root, except children and aria-label.