Radio
A radio input that allows users to select one option from a set of mutually exclusive choices.
Usage
The Radio component allows users to select exactly one option from a set of mutually exclusive choices. Radio buttons should be used within a RadioGroup for proper accessibility and form handling.
Basic Example
Pre-selected Option
Disabled State
Props
Radio Props
| Prop | Type | Default |
|---|---|---|
pressable? | boolean | true |
hitSlop? | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs" | - |
focusable? | boolean | true |
onHoverChange? | ((isHovering: boolean) => void) | - |
onHoverEnd? | ((e: HoverEvent) => void) | - |
onHoverStart? | ((e: HoverEvent) => void) | - |
inputRef? | RefObject<HTMLInputElement | null> | - |
onFocusChange? | ((isFocused: boolean) => void) | - |
isDisabled? | boolean | - |
value | string | - |
layout? | LayoutOptions | - |
size? | "2xs" | "xs" | "sm" | Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "default", "2xs" | "xs" | "sm">> | - |
variant? | "outlined" | "muted" | - |
RadioGroup Props
| Prop | Type | Default |
|---|---|---|
layout? | LayoutOptions | - |
onFocusChange? | ((isFocused: boolean) => void) | - |
validate? | ((value: string | null) => true | ValidationError | null | undefined) | - |
isInvalid? | boolean | - |
isRequired? | boolean | - |
name? | string | - |
isReadOnly? | boolean | - |
isDisabled? | boolean | - |
value? | string | null | - |
orientation? | Orientation | 'vertical' |
validationBehavior? | "native" | "aria" | 'native' |
Edit on GitHub
Last updated on