Segment Group

A component for grouping and toggling between different sections or options, often used for filters or navigation.

Item 1 Item 2 Item 3

Anatomy

Usage

<script>
  import {SegmentGroup} from 'ui-ingredients';

  let items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
</script>

<SegmentGroup.Root>
  {#each items as item}
    <SegmentGroup.Item value={item.value}>
      <SegmentGroup.ItemText>{item.value}</SegmentGroup.ItemText>
      <SegmentGroup.ItemControl />
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  {/each}

  <SegmentGroup.Indicator />
</SegmentGroup.Root>

API Reference

Root

Prop	Default	Description
`defaultValue`		`string` The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.
`disabled`		`boolean` If `true`, the radio group will be disabled
`form`		`string` The associate form of the underlying input.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; label?: string; indicator?: string; item(value: string)?: string; itemLabel(value: string)?: string; itemControl(value: string)?: string; itemHiddenInput(value: string)?: string; }` The ids of the elements in the radio. Useful for composition.
`name`		`string` The name of the input fields in the radio (Useful for form submission).
`onValueChange`		`(details: ValueChangeDetails) => void` Function called once a radio is checked
`orientation`		`"horizontal" \| "vertical"` Orientation of the radio group
`readOnly`		`boolean` Whether the checkbox is read-only
`value`		`string` The controlled value of the radio group
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-orientation`	The orientation of the radio-group
`data-part`	root
`data-scope`	radio-group

HiddenInput

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Indicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-orientation`	The orientation of the indicator
`data-part`	indicator
`data-scope`	radio-group

Item

Prop	Default	Description
`disabled`		`boolean` Whether the item is disabled.
`invalid`		`boolean` Whether the item is invalid.
`value`		`string` The value of the item.
`asChild`		`Snippet` Render a different element.

ItemControl

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-part`	item-control
`data-scope`	radio-group

ItemText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-orientation`	The orientation of the label
`data-part`	label
`data-scope`	radio-group

Accessibility

Keyboard Support

Key	Description
Tab	Moves focus to either the checked radio item or the first radio item in the group.
Space	When focus is on an unchecked radio item, checks it.
ArrowDown	Moves focus and checks the next radio item in the group.
ArrowRight	Moves focus and checks the next radio item in the group.
ArrowUp	Moves focus to the previous radio item in the group.
ArrowLeft	Moves focus to the previous radio item in the group.