Radio

An accessible and stylable radio button. `Radio.Root` renders a `<span>` with a hidden `<input>` next to it — always wrapped in a `<label>` for maximum accessibility. `RadioGroup` manages shared state.

Radio component

Billing plan

Free

For personal projects and experimentation.

Pro

For professionals who need more power and storage.

Team

For teams collaborating on multiple projects.

    import { Radio } from "gnome-ui/radio";
    import { RadioGroup } from "gnome-ui/radio-group";

    export function RadioGroupBasic() {
      return (
        <RadioGroup defaultValue="system" aria-label="Theme">
          {["Light", "Dark", "System"].map((label) => (
            <label key={label}>
              <Radio.Root value={label.toLowerCase()}>
                <Radio.Indicator />
              </Radio.Root>
              {label}
            </label>
          ))}
        </RadioGroup>
      );
    }

Controlled

Use value + onValueChange to control state externally. Individual options accept disabled.

Notifications

All activityMentions onlyNone

Selected: mentions

RadioIndicator

Indicates whether the radio button is selected. Renders a <span> element.

Documentation: Base UI Radio

API reference

RadioGroup

Provides a shared state to a series of radio buttons. Renders a <div> element.

RadioGroup Props:

Prop	Type	Default	Description
name	`string`	-	Identifies the field when a form is submitted.
defaultValue	`Value`	-	The uncontrolled value of the radio button that should be initially selected.To render a controlled radio group, use the `value` prop instead.
value	`Value`	-	The controlled value of the radio item that should be currently selected.To render an uncontrolled radio group, use the `defaultValue` prop instead.
onValueChange	`((value: Value, eventDetails: Radio.Group.ChangeEventDetails) => void)`	-	Callback fired when the value changes.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
readOnly	`boolean`	`false`	Whether the user should be unable to select a different radio button in the group.
required	`boolean`	`false`	Whether the user must choose a value before submitting a form.
inputRef	`Ref<HTMLInputElement>`	-	A ref to access the hidden input element.
className	`string \| ((state: RadioGroup.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: RadioGroup.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: RadioGroup.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

RadioGroup Data Attributes:

Attribute	Type	Description
data-disabled	-	Present when the radio group is disabled.

Root

Represents the radio button itself. Renders a <span> element and a hidden <input> beside.

Root Props:

Prop	Type	Default	Description
value	`Value`	-	The unique identifying value of the radio in a group.
nativeButton	`boolean`	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
disabled	`boolean`	-	Whether the component should ignore user interaction.
readOnly	`boolean`	-	Whether the user should be unable to select the radio button.
required	`boolean`	-	Whether the user must choose a value before submitting a form.
inputRef	`Ref<HTMLInputElement>`	-	A ref to access the hidden input element.
className	`string \| ((state: Radio.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Radio.Root.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Radio.Root.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Root Data Attributes:

Attribute	Type	Description
data-checked	-	Present when the radio is checked.
data-unchecked	-	Present when the radio is not checked.
data-disabled	-	Present when the radio is disabled.
data-readonly	-	Present when the radio is readonly.
data-required	-	Present when the radio is required.
data-valid	-	Present when the radio is in valid state (when wrapped in Field.Root).
data-invalid	-	Present when the radio is in invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the radio's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the radio has been touched (when wrapped in Field.Root).
data-filled	-	Present when the radio is checked (when wrapped in Field.Root).
data-focused	-	Present when the radio is focused (when wrapped in Field.Root).

Indicator