Radio

The Radio.Item component provides a customizable, accessible radio button input. It must always be used inside a Radio.Root to function correctly. The Radio.Root component provides the necessary context for managing grouped selections.

Usage

import { Radio } from "@harnessio/ui/components";

function Example() {
  const [group1Value, setGroup1Value] = React.useState("option1");

  return (
    <Radio.Root
        label="Label text"
        caption="Caption text"
        value={group1Value}
        onValueChange={setGroup1Value}
      >
        <Radio.Item name="group1" value="option1" label="Option 1" caption="This is option 1" />
        <Radio.Item name="group1" value="option2" label="Option 2" caption="This is option 2" />
      </Radio.Root>
  );
}

Optional

The radio group can be marked as optional via the optional prop on Radio.Root.

If the Radio.Root has a label, the optional indicator will appear next to the label.

If there’s no label, the optional indicator will be shown next to each individual radio item.

Disabled

The radio group can be marked as disabled via the disabled prop on Radio.Root, which disables all radio items within the group.

Alternatively, the disabled prop can be passed to individual Radio.Item to disable them selectively.

Error state

The radio group can be marked as error via the error prop on Radio.Root.

Orientation

The Radio.Root component accepts an optional orientation prop, which defines the layout direction of the radio and its group label. Available options are horizontal and vertical (default).

API Reference

The Radio.Item component must always be used inside a Radio.Root to function correctly. The Radio.Root provides the necessary context for managing grouped selections.

Root

interface InformerProps extends Omit<TooltipProps, "children"> {
  className?: string;
  /**
   * If disabled, the tooltip will not be shown
   */
  disabled?: boolean;
  iconProps?: IconPropsV2;
}

Prop	Required	Default	Type
name	false		string
value	true		string
label	false		string
caption	false		string
disabled	false		boolean
className	false		string
wrapperClassName	false		string
error	false		boolean
optional	false	false	boolean
informerContent	false		Exclude<ReactNode, boolean | null | undefined>
informerProps	false		InformerProps
labelSuffix	false		ReactNode
orientation	false	'vertical'	'vertical' | 'horizontal'

Item

Prop	Required	Default	Type
name	false		string
value	true		string
label	false		string
caption	false		string
disabled	false		boolean
className	false		string