# Segmented Control Item

## Usage

Individual segment item rendering as a radio button within the segmented control.

```ts
import { SegmentedControlItem } from '@astryx-vue/core/SegmentedControl'
```

One segment of a [Segmented Control](/en/components/segmented-control). The item declares its own `value`; the parent control holds the selected value, so the item keeps no state of its own and one segment is always selected. `label` is the visible text and also the accessible name. Put artwork in the `icon` slot to draw it before the label, and set `isLabelHidden` to keep only the icon.

## Examples

Common configurations, variations, and states.

### Basic

Label-only options inside a SegmentedControl. Each item declares a value; the parent control holds the selected value and change handler.

```vue
<script setup lang="ts">
import { SegmentedControl, SegmentedControlItem } from '@astryx-vue/core/SegmentedControl'
import { ref } from 'vue'

const view = ref('board')
</script>

<template>
  <SegmentedControl v-model="view" label="View mode">
    <SegmentedControlItem value="board" label="Board" />
    <SegmentedControlItem value="list" label="List" />
    <SegmentedControlItem value="timeline" label="Timeline" />
  </SegmentedControl>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Unique value of this segment, matched against the parent control's `v-model`. Required. |
| `label` | `string` | — | Name of the segment: its visible text, and its accessible name when `isLabelHidden` is set. Required. |
| `isLabelHidden` | `boolean` | `false` | Visually hides the label so only the icon shows. The label still names the segment through `aria-label`. |
| `isDisabled` | `boolean` | `false` | Disables this segment. It keeps its place in the row, but it can no longer be selected or reached with the arrow keys. |

## Slots

- `icon`: artwork shown before the label. An `Icon` placed here follows the size of the parent control.