Inputs

RadioGroup

Single-selection radio group built on Bits UI with roving focus and arrow-key navigation.

<script>
  import { RadioGroup } from "@codeatlasdev/ui";
  let plan = $state("pro");
</script>

<RadioGroup items={[{ value: "free", label: "Free" }, { value: "pro", label: "Pro" }]} bind:value={plan} />

Arrow keys move focus and selection inside the group, Tab leaves it. The group has no visible title of its own, so wrap it in a fieldset with a legend when the choice needs a heading.

Vertical

The default layout.

Apple

Banana

Cherry

Selected: apple

Code

<script lang="ts">
  import { RadioGroup } from '@codeatlasdev/ui';

  let fruit = $state('apple');

  const fruits = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];
</script>

<RadioGroup items={fruits} bind:value={fruit} />
<p class="out">Selected: <code>{fruit}</code></p>

<style>
  .out {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
  }
</style>

Horizontal

orientation="horizontal" lays the options out in a row.

Small

Medium

Large

Code

<script lang="ts">
  import { RadioGroup } from '@codeatlasdev/ui';

  let size = $state('md');

  const sizes = [
    { value: 'sm', label: 'Small' },
    { value: 'md', label: 'Medium' },
    { value: 'lg', label: 'Large' },
  ];
</script>

<RadioGroup items={sizes} bind:value={size} orientation="horizontal" />

Disabled

Disable a single item, or the whole group.

Yes

Maybe

Apple

Banana

Cherry

Code

<script lang="ts">
  import { RadioGroup } from '@codeatlasdev/ui';

  let answer = $state('yes');

  const yesNo = [
    { value: 'yes', label: 'Yes' },
    { value: 'no', label: 'No' },
    { value: 'maybe', label: 'Maybe', disabled: true },
  ];

  const fruits = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];
</script>

<RadioGroup items={yesNo} bind:value={answer} orientation="horizontal" />
<RadioGroup items={fruits} value="banana" disabled />

Props

Prop	Type	Default	Description
`value`	`string`	`''`	Bindable selected value.
`items`	`RadioItem[]`	–	Options: { value, label, disabled? }.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction and arrow-key axis.
`disabled`	`boolean`	`false`	Disables the entire group.
`class`	`string`	–	Extra classes on the group.
`onchange`	`(value: string) => void`	–	Called when the selection changes.