# Segment Group

URL: https://ark-ui.com/docs/components/segment-group
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/segment-group.mdx

Organizes and navigates between sections in a view.

---

<ComponentPreview id="SegmentGroup" />

## Anatomy

<Anatomy id="segmented-control" />

```tsx
<SegmentGroup.Root>
  <SegmentGroup.Indicator />
  <SegmentGroup.Item>
    <SegmentGroup.ItemText />
    <SegmentGroup.ItemControl />
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
</SegmentGroup.Root>
```

## Examples

**Example: basic**

```ripple
import { SegmentGroup } from 'ark-ripple/segment-group';
import styles from 'styles/segment-group.module.css';

const frameworks = ['React', 'Solid', 'Vue'];

export component Basic() {
  <SegmentGroup.Root class={styles.Root} defaultValue="React">
    <SegmentGroup.Indicator class={styles.Indicator} />
    for (const framework of frameworks; key framework) {
      <SegmentGroup.Item class={styles.Item} value={framework}>
        <SegmentGroup.ItemText class={styles.ItemText}>{framework}</SegmentGroup.ItemText>
        <SegmentGroup.ItemControl class={styles.ItemControl} />
        <SegmentGroup.ItemHiddenInput />
      </SegmentGroup.Item>
    }
  </SegmentGroup.Root>
}

```

### Controlled

To create a controlled SegmentGroup component, manage the current selected segment using the `value` prop and update it
when the `onValueChange` event handler is called:

**Example: controlled**

```ripple
import { SegmentGroup } from 'ark-ripple/segment-group';
import { track } from 'ripple';
import styles from 'styles/segment-group.module.css';

const frameworks = ['React', 'Solid', 'Vue'];

export component Controlled() {
  let value = track<string | null>(null);

  <SegmentGroup.Root
    class={styles.Root}
    {value}
    onValueChange={(e) => {
      @value = e.value;
    }}
  >
    <SegmentGroup.Indicator class={styles.Indicator} />
    for (const framework of frameworks; key framework) {
      <SegmentGroup.Item class={styles.Item} value={framework}>
        <SegmentGroup.ItemText class={styles.ItemText}>{framework}</SegmentGroup.ItemText>
        <SegmentGroup.ItemControl class={styles.ItemControl} />
        <SegmentGroup.ItemHiddenInput />
      </SegmentGroup.Item>
    }
  </SegmentGroup.Root>
}

```

### Root Provider

An alternative way to control the segment group is to use the `RootProvider` component and the `useSegmentGroup` hook.
This way you can access the state and methods from outside the component.

**Example: root-provider**

```ripple
import { SegmentGroup, useSegmentGroup } from 'ark-ripple/segment-group';
import styles from 'styles/segment-group.module.css';

const frameworks = ['React', 'Solid', 'Vue'];

export component RootProvider() {
  const segmentGroup = useSegmentGroup({ defaultValue: 'React' });

  <div class="stack">
    <SegmentGroup.RootProvider class={styles.Root} value={segmentGroup}>
      <SegmentGroup.Indicator class={styles.Indicator} />
      for (const framework of frameworks; key framework) {
        <SegmentGroup.Item class={styles.Item} value={framework}>
          <SegmentGroup.ItemText class={styles.ItemText}>{framework}</SegmentGroup.ItemText>
          <SegmentGroup.ItemControl class={styles.ItemControl} />
          <SegmentGroup.ItemHiddenInput />
        </SegmentGroup.Item>
      }
    </SegmentGroup.RootProvider>
    <output>
      {'selected: '}
      {@segmentGroup.value}
    </output>
  </div>
}

```

### Disabled

To disable a segment, simply pass the `disabled` prop to the `SegmentGroup.Item` component:

**Example: disabled**

```ripple
import { SegmentGroup } from 'ark-ripple/segment-group';
import styles from 'styles/segment-group.module.css';

const frameworks = ['React', 'Solid', 'Vue'];

export component Disabled() {
  <SegmentGroup.Root class={styles.Root} defaultValue="React">
    <SegmentGroup.Indicator class={styles.Indicator} />
    for (const framework of frameworks; key framework) {
      <SegmentGroup.Item class={styles.Item} value={framework} disabled={framework === 'Vue'}>
        <SegmentGroup.ItemText class={styles.ItemText}>{framework}</SegmentGroup.ItemText>
        <SegmentGroup.ItemControl class={styles.ItemControl} />
        <SegmentGroup.ItemHiddenInput />
      </SegmentGroup.Item>
    }
  </SegmentGroup.Root>
}

```

## API Reference

<ComponentTypes id="radio-group" replace={{ 'radio-group': 'segment-group', 'radio group': 'segment group' }} />

## Accessibility

Complies with the [Radio WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).

### Keyboard Support

<KeyBindingsTable id="radio-group" />