A radio button component with label support. The label can be placed at the Start, End, Top, or Bottom position with full RTL support.
Loading demo: radio-label-real-world
npx sdaia-ui@latest add radiobutton
import { RadioButton } from "@/components/ui/radio-button"<RadioButton placement="start" />Use the `size` prop to change the size of the radio button.
Loading demo: radio-button-size
The default Primary style uses the brand colour when selected.
Loading demo: radio-button-checked-state
The default Primary style uses the brand colour when selected.
Loading demo: radio-button-primary
Use `style="Neutral"` for a grey selected state in secondary contexts.
Loading demo: radio-button-neutral
Use `state="Disabled"` to prevent user interaction.
Loading demo: radio-button-disabled
Props for the Radio Button component.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | — | optional |
size | 'sm' | 'md' | 'lg' | — | optional |
variant | 'primary' | 'neutral' | — | optional |
error | string | — | optional |
helperText | string | — | optional |
placement | "start" | "end" | "top" | "bottom" | "start" | optional |