A single controlled color-swatch radio: a circular chip filled with a hex color that shows a check icon when selected. Renders a <div role="radio">. The color label is rendered visually hidden (sr-only) for accessibility.
Use ColorRadio as the primitive for one selectable color swatch when you manage its checked state yourself.
For a full labelled set of swatches bound to a single value, use ColorRadioGroup (or @uxf/form/color-radio-group inside a @uxf/form form). ColorRadio is the primitive that group composes.
import { ColorRadio } from "@uxf/ui/color-radio";
<ColorRadio checked={value === 1} color="#ff0000" colorLabel="Red" name="color" onChange={setValue} value={1} />;
Omit onChange to render a non-interactive swatch.
Extends FormControlProps<ValueType> (from @uxf/ui/types) without its onChange. ValueType defaults to string | number.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — (required) | Whether this swatch is selected. |
color | `#${string}` | — (required) | Swatch background (hex). The check-icon color (black/white) is derived from its luminance. |
colorLabel | ReactNode | — (required) | Accessible label; rendered visually hidden. |
value | ValueType | — (required) | Value passed to onChange when activated. |
name | string | — (required) | Field name. |
onChange | (value: ValueType) => void | — | Called with value on click. |
renderContent | (className, checked, colorLabel, value) => ReactNode | — | Custom inner render; replaces the default check Icon. |
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, dims the swatch). |
isInvalid | boolean | false | 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. |
Unlike Radio, ColorRadio has no size prop.
No theme variants or sizes. States are driven by props: checked shows the check icon; isDisabled dims the swatch with an overlay.
Import the stylesheets once in your global CSS (the swatch renders the check icon, so icon.css is required):
@import url("@uxf/ui/css/icon.css");
@import url("@uxf/ui/css/color-radio.css");
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.