RadioGroup v0.1.0 Forms

Compound radio group built on native radio inputs (arrow-key navigation comes from the browser).

import { RadioGroup } from "latticeui-react";

Examples

Plan picker

Arrow keys move selection; disabled items are skipped.

PlanFree - $0/monthPro - $12/monthTeam - $48/monthEnterprise (contact us)

Show code

<RadioGroup.Root label="Plan" defaultValue="pro">
  <RadioGroup.Item value="free" label="Free - $0/month" />
  <RadioGroup.Item value="pro" label="Pro - $12/month" />
  <RadioGroup.Item value="team" label="Team - $48/month" />
  <RadioGroup.Item value="enterprise" label="Enterprise (contact us)" disabled />
</RadioGroup.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div[role=radiogroup]`	`[data-scope="radio-group"][data-part="root"]`
`label`	`span`	`[data-scope="radio-group"][data-part="label"]`
`item`	`label`	`[data-scope="radio-group"][data-part="item"]`
`control`	`span`	`[data-scope="radio-group"][data-part="control"]`
`indicator`	`span`	`[data-scope="radio-group"][data-part="indicator"]`
`itemLabel`	`span`	`[data-scope="radio-group"][data-part="itemLabel"]`

Props

Prop	Type	Default
`Root.label`	`string`	—
`Root.value / defaultValue`	`string`	—
`Root.onValueChange`	`(value: string) => void`	—
`Root.orientation`	`"vertical" \| "horizontal"`	`"vertical"`
`Item.value` *	`string`	—
`Item.label` *	`ReactNode`	—
`Item.disabled`	`boolean`	—

Accessibility

Roles: radiogroupradio (native inputs)

Key	Action
`ArrowUp/Down/Left/Right`	moves selection (native)

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="radio-group"][data-part="item"] {
  /* your overrides */
}

State attributes: data-state=checked|uncheckeddata-orientationdata-disabled