RadioGroup
ExperimentalChoose one option from a visible set.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { RadioGroup, RadioGroupItem } from 'panel-ui-kit/radio-group';import { Label } from 'panel-ui-kit/label'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <RadioGroup defaultValue="monthly" name="frequency" aria-label="Update frequency"> <div style={{ display: "flex", alignItems: "center", gap: 12 }}><RadioGroupItem id="weekly" value="weekly" /><Label htmlFor="weekly">Weekly</Label></div> <div style={{ display: "flex", alignItems: "center", gap: 12 }}><RadioGroupItem id="monthly" value="monthly" /><Label htmlFor="monthly">Monthly</Label></div> </RadioGroup> </PanelUiTheme> );}When to use
Name the group and each item. Use Checkbox for independent choices and Select for a longer list.
Keyboard
Tab enters the selected option. Arrow keys move and select; disabled items are skipped.
Properties
| Property | Values | Default |
|---|---|---|
value / defaultValue | string | Caller owned |
orientation | horizontal · vertical | — |
name | Native form field | — |
motion | full · reduced · off · object | Inherited |