ColorRadio

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.

When to use

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.

Usage

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.

Props

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.

Variants & states

No theme variants or sizes. States are driven by props: checked shows the check icon; isDisabled dims the swatch with an overlay.

Requirements

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.

Default

Open in new tab

Props

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.

Requirements

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.