ColorRadioGroup

react-hook-form-bound field: a labeled group of color swatches bound to a single hex value. Wraps the @uxf/ui/color-radio-group primitive and manages its value, isInvalid, and helperText from form state.

When to use

Use @uxf/form/color-radio-group for a single color choice from a fixed set of swatches inside a @uxf/form form — it registers the field with react-hook-form via control/name. For a standalone, manually-controlled swatch group (outside a form), use the @uxf/ui/color-radio-group twin directly.

Usage

import { ColorRadioGroup } from "@uxf/form/color-radio-group";
import { Form } from "@uxf/form/form";
import { HexColor } from "@uxf/ui/types";
import { useForm } from "react-hook-form";

interface FormData {
    color: HexColor | null;
}

const OPTIONS: { value: HexColor; label: string }[] = [
    { value: "#ff0000", label: "Red" },
    { value: "#00ff00", label: "Green" },
    { value: "#0000ff", label: "Blue" },
];

function Example() {
    const formApi = useForm<FormData>({ defaultValues: { color: null } });

    return (
        <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}>
            <ColorRadioGroup control={formApi.control} isRequired label="Pick a color" name="color" options={OPTIONS} />
        </Form>
    );
}

Value is the selected hex color (`#${string}` | null).

Props

ColorRadioGroupProps<FormData> = ControlProps<FormData> + the visual props of the @uxf/ui/color-radio-group twin (minus the ones this field manages: isFocused, isInvalid, name, onChange, value) + the field props below.

All other props (label, hiddenLabel, helperText, …) are forwarded to the twin — see @uxf/ui/color-radio-group.

Validation

• isRequired adds a required rule; its message defaults to a localized string (EN: "This field is required") and can be overridden with requiredMessage.
• Add further rules via rules; the field-level error is shown as the twin's helperText and sets isInvalid.
• The group is automatically disabled when options is empty.

Requirements

• Must be rendered inside a Form — it reads the form context (formId, and inherits isDisabled / isReadOnly) and needs a react-hook-form control.
• Ships no CSS of its own; it renders @uxf/ui/color-radio-group, so include that component's stylesheet(s) and the @uxf/ui token layer — see @uxf/ui/color-radio-group.

Links

• Visual/primitive twin: @uxf/ui/color-radio-group