A single controlled radio indicator. Renders a <span role="radio"> with a dot inside; it does not render its own label.
Use Radio as a low-level building block when you need one radio control and manage its checked state yourself. It does not enforce mutual exclusion on its own.
For a full labelled set of mutually exclusive options bound to a single value, use RadioGroup (or @uxf/form/radio-group inside a @uxf/form form) — that is the usual entry point. Radio is the primitive RadioGroup composes.
import { Radio } from "@uxf/ui/radio";
<Radio checked={value === 1} name="plan" onChange={setValue} value={1} />;
Omit onChange to render a non-interactive indicator.
Extends FormControlProps<ValueType> (from @uxf/ui/types) without its onChange. ValueType defaults to string | number.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — (required) | Whether this radio is selected. |
value | ValueType | — (required) | Value passed to onChange when activated. |
name | string | — (required) | Field name. |
onChange | (value: ValueType) => void | — | Called with value on click. Omit for a read-only indicator. |
size | RadioSize | "default" | Indicator size. |
renderContent | (className, checked, value) => ReactNode | — | Custom render of the inner dot; replaces the default <span>. |
className | string | — | Extra class on the root element. |
style | CSSProperties | — | Inline style on the root element. |
isDisabled | boolean | false | Non-interactive state (sets aria-disabled, removes pointer events). |
isInvalid | boolean | false | Error styling (sets aria-invalid). |
isReadOnly | boolean | false | Removes the control from the tab order (sets aria-readonly). |
isRequired | boolean | false | Sets aria-required. |
isFocused | boolean | false | Forced focus indicator. |
onFocus | FocusEventHandler | — | Focus handler. |
onBlur | FocusEventHandler | — | Blur handler. |
Sizes (from theme.ts):
| Group | Values |
|---|---|
size | default, lg |
RadioSizes is an open interface, so a project can add its own values via module augmentation:
declare module "@uxf/ui/radio/theme" {
interface RadioSizes {
sm: true;
}
}
Behavioural states are driven by the props above: checked (selected), isInvalid, isDisabled, isReadOnly.
Import the component stylesheet once in your global CSS:
@import url("@uxf/ui/css/radio.css");
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.