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.