RadioGroup

One choice from a few options, all visible.

Volatility

Low Medium High

radio-group.example.svelte

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

  let volatility = $state<string | null>('medium');
</script>

<RadioGroup
  label="Volatility"
  orientation="horizontal"
  bind:value={volatility}
  options={[
    { label: 'Low', value: 'low' },
    { label: 'Medium', value: 'medium' },
    { label: 'High', value: 'high' },
  ]}
/>

Usage

Do

Use it for 2 to 5 options the reader should see at once.

Don’t

Do not use it for many options; use Select.

Accessibility

A fieldset with its legend; native radios share one name.

Keyboard

RadioGroup keyboard interactions
Keys	Action
`Arrow keys`	Choose the next or previous option
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

RadioGroup props
Prop	Type	Default	Description
`disabled`	`boolean`	`false`
`error`	`string`	—
`hint`	`string`	—
`label` *required	`string`	—
`name`	`string`	—
`onValueChange`	`(value: string) => void`	—
`options` *required	`ReadonlyArray<IUiOption>`	—
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`
`value`	`string \| null`	`null`	Bindable in Svelte; `defaultValue` in React.