Radio Group
Choose exactly one option while moving through a labeled set.
Usage
Vertical
Use vertical movement while preserving the same pane-size rules.
Arrow keys move and check like a native radio group. Form values use hidden native radios.
<!-- Radio Group / Vertical -->
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '@sectile/vue/radio-group'
const items = ['email', 'push', 'sms']
</script>
<template>
<RadioGroupRoot :items="items" default-value="email" name="channel">
<RadioGroupItem v-for="item in items" :key="item" :value="item">{{ item }}<RadioGroupIndicator /></RadioGroupItem>
</RadioGroupRoot>
</template>Horizontal disabled
Move horizontally through radio choices while skipping an unavailable option.
Arrow keys move and check like a native radio group. Form values use hidden native radios.
<!-- Radio Group / Horizontal Disabled -->
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '@sectile/vue/radio-group'
const items = ['email', 'push', 'sms']
</script>
<template>
<RadioGroupRoot :items="items" default-value="email" name="channel">
<RadioGroupItem v-for="item in items" :key="item" :value="item">{{ item }}<RadioGroupIndicator /></RadioGroupItem>
</RadioGroupRoot>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Arrow keys move and check like a native radio group. Form values use hidden native radios.
<!-- Radio Group / Controlled -->
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '@sectile/vue/radio-group'
const items = ['email', 'push', 'sms']
</script>
<template>
<RadioGroupRoot :items="items" default-value="email" name="channel">
<RadioGroupItem v-for="item in items" :key="item" :value="item">{{ item }}<RadioGroupIndicator /></RadioGroupItem>
</RadioGroupRoot>
</template>API
Vue package: @sectile/vue/radio-group
RadioGroupRootRadioGroupItemRadioGroupIndicator
Props
RadioGroupRootProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
disabledItemsItem values excluded from focus and selection.
formID of the native form associated with the control.
itemsOrdered item values managed by the component.
modelValueCurrent value when state is controlled by the parent.
nameName used for native form submission.
orientationAxis used for layout and keyboard movement.
readonlyWhether the value can be inspected but not changed.
requiredWhether the control must contain a valid value before submission.
RadioGroupItemProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
disabledWhether interaction is unavailable.
valueCurrent value exposed by this contract.
RadioGroupIndicatorProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
Slots
RadioGroupRootSlotProps
disabledWhether interaction is unavailable.
highlightedValueValue currently highlighted for interaction.
readonlyWhether the value can be inspected but not changed.
valueCurrent value exposed by this contract.
RadioGroupItemSlotProps
checkedWhether the control is checked.
disabledWhether interaction is unavailable.
highlightedWhether this item is highlighted for interaction.
valueCurrent value exposed by this contract.
Events
RadioGroupRoot
highlightEmitted when the highlighted item changes.
update:modelValueEmitted when the component requests a new controlled value.
Other types
RadioGroupValueChangeHandler
type RadioGroupValueChangeHandler = (value: string) => voidRadioGroupHighlightHandler
type RadioGroupHighlightHandler = (value: string | null) => voidParts
Shared scope: [data-scope="radio-group"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
root | [data-part="root"] | Defines the component boundary and owns its composed parts. | — |
item | [data-part="item"] | Represents one selectable or actionable item. | — |
indicator | [data-part="indicator"] | Shows state or position without replacing the primary content. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Arrow keys | Move the active option in the visible orientation. |
| Home / End | Move to the first or last eligible option. |
| Enter / Space | Select or activate the current option. |
| Printable text | Move to the next matching option when typeahead is available. |
Accessibility
The group and each radio expose checked, highlighted, and disabled state with one roving tab stop.
See the corresponding WAI-ARIA pattern for the host accessibility contract.