Inputs

Radio

A group of mutually exclusive choices with arrow-key navigation.

RadioView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Select optionOption 1Option 2Another choice

tsx

import { Cell } from "retend";

import { Radio } from "innate-ui";

type Choice = "one" | "two";

export function RadioDemo() {
  const selected = Cell.source<Choice>("one");
  return (
    <Radio name="radio-demo" value={selected} onChange={(value) => selected.set(value)}>
      <Radio.Legend>Select option</Radio.Legend>
      <Radio.Item value="one">Option 1</Radio.Item>
      <Radio.Item value="two">
        <span>Option 2</span>
        <small>Another choice</small>
      </Radio.Item>
    </Radio>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

RadioProps

Prop	Type	Default
`name`required Native radio-group name shared by every item.	`string`	`—`
`value`required Currently selected item value.	`JSX.ValueOrCell<Value>`	`—`
`children`required `Radio.Legend` and `Radio.Item` children.	`JSX.Children`	`—`
`orientation` Layout and accessible orientation of the group.	`JSX.ValueOrCell<RadioOrientation>`	`"vertical"`
`invalid` Whether the radio group is in an invalid state. Inherits from `Field`.	`JSX.ValueOrCell<boolean>`	`false`
`ariaDescribedBy` Ids of elements that describe the radio group.	`JSX.ValueOrCell<string \| undefined>`	`—`
`ariaLabelledBy` Ids of elements that label the radio group.	`JSX.ValueOrCell<string \| undefined>`	`—`
`onChange` Called when a different item is selected.	`(value: Value) => void`	`—`

RadioItemProps

Prop	Type	Default
`value`required Value selected when this radio item is chosen.	`Value`	`—`
`children`required Radio label content.	`JSX.Children`	`—`
`disabled` Whether the radio item is disabled.	`JSX.ValueOrCell<boolean>`	`false`

Inspect the typed source →