RadioGroup

Grouped radio buttons with shared name and single-selection semantics.

import { RadioGroup } from "@ps1ui/core";

Basic

applebananacherry

<RadioGroup aria-label="favourite fruit">
  <Label style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <Radio name="fruit" value="apple" defaultChecked />
    apple
  </Label>
  <Label style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <Radio name="fruit" value="banana" />
    banana
  </Label>
  <Label style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <Radio name="fruit" value="cherry" />
    cherry
  </Label>
</RadioGroup>

Disabled

applebanana

<RadioGroup aria-label="favourite fruit">
  <Label style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <Radio name="fruit" value="apple" defaultChecked disabled />
    apple
  </Label>
  <Label style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <Radio name="fruit" value="banana" disabled />
    banana
  </Label>
</RadioGroup>

Labelled by external element

favourite fruit

applebanana

<Label id="fruit-label">favourite fruit</Label>
<RadioGroup aria-labelledby="fruit-label">
  <Label style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <Radio name="fruit" value="apple" defaultChecked />
    apple
  </Label>
  <Label style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <Radio name="fruit" value="banana" />
    banana
  </Label>
</RadioGroup>

Props

Prop	Type	Default	Description
`name`	`string`	—	Shared `name` attribute applied to every child `<Radio>`. Auto-generated when omitted.
`value`	`string`	—	Controlled selected value. When set, the group ignores its internal state.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onValueChange`	`(value: string) => void`	—	Fired with the newly-selected value whenever the user picks a different `<Radio>`.
`disabled`	`boolean`	`false`	Disable every `<Radio>` inside the group. Precedence is asymmetric: a per-radio `disabled={true}` still opts that radio in when the group is enabled, but a per-radio `disabled={false}` cannot opt out of a group-wide disable.

All native <div> attributes are also accepted.

Radio Props

Prop	Type	Default	Description
`value`	`string`	—	Value submitted when this radio is selected. Also used by `<RadioGroup>` to identify the selected radio.

All native <input> attributes are also accepted except type.