# 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**

#### React

```tsx
import { SegmentGroup } from '@ark-ui/react/segment-group'
import styles from 'styles/segment-group.module.css'

export const Basic = () => {
  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
  return (
    <SegmentGroup.Root className={styles.Root} defaultValue="React">
      <SegmentGroup.Indicator className={styles.Indicator} />
      {frameworks.map((framework) => (
        <SegmentGroup.Item className={styles.Item} key={framework} value={framework}>
          <SegmentGroup.ItemText className={styles.ItemText}>{framework}</SegmentGroup.ItemText>
          <SegmentGroup.ItemControl className={styles.ItemControl} />
          <SegmentGroup.ItemHiddenInput />
        </SegmentGroup.Item>
      ))}
    </SegmentGroup.Root>
  )
}

```

#### Solid

```tsx
import { SegmentGroup } from '@ark-ui/solid/segment-group'
import { Index } from 'solid-js'
import styles from 'styles/segment-group.module.css'

export const Basic = () => {
  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
  return (
    <SegmentGroup.Root class={styles.Root} defaultValue="React">
      <SegmentGroup.Indicator class={styles.Indicator} />
      <Index each={frameworks}>
        {(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>
        )}
      </Index>
    </SegmentGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { SegmentGroup } from '@ark-ui/vue/segment-group'
import styles from 'styles/segment-group.module.css'

const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
</script>

<template>
  <SegmentGroup.Root :class="styles.Root" default-value="React">
    <SegmentGroup.Indicator :class="styles.Indicator" />
    <SegmentGroup.Item v-for="framework in frameworks" :key="framework" :class="styles.Item" :value="framework">
      <SegmentGroup.ItemText :class="styles.ItemText">{{ framework }}</SegmentGroup.ItemText>
      <SegmentGroup.ItemControl :class="styles.ItemControl" />
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  </SegmentGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { SegmentGroup } from '@ark-ui/svelte/segment-group'
  import styles from 'styles/segment-group.module.css'

  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
</script>

<SegmentGroup.Root class={styles.Root} defaultValue="React">
  <SegmentGroup.Indicator class={styles.Indicator} />
  {#each frameworks as 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>
  {/each}
</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**

#### React

```tsx
import { SegmentGroup } from '@ark-ui/react/segment-group'
import { useState } from 'react'
import styles from 'styles/segment-group.module.css'

export const Controlled = () => {
  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
  const [value, setValue] = useState<string | null>(null)
  return (
    <SegmentGroup.Root className={styles.Root} value={value} onValueChange={(e) => setValue(e.value)}>
      <SegmentGroup.Indicator className={styles.Indicator} />
      {frameworks.map((framework) => (
        <SegmentGroup.Item className={styles.Item} key={framework} value={framework}>
          <SegmentGroup.ItemText className={styles.ItemText}>{framework}</SegmentGroup.ItemText>
          <SegmentGroup.ItemControl className={styles.ItemControl} />
          <SegmentGroup.ItemHiddenInput />
        </SegmentGroup.Item>
      ))}
    </SegmentGroup.Root>
  )
}

```

#### Solid

```tsx
import { SegmentGroup } from '@ark-ui/solid/segment-group'
import { Index, createSignal } from 'solid-js'
import styles from 'styles/segment-group.module.css'

export const Controlled = () => {
  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
  const [value, setValue] = createSignal<string | null>(null)

  return (
    <SegmentGroup.Root class={styles.Root} value={value()} onValueChange={(e) => setValue(e.value)}>
      <SegmentGroup.Indicator class={styles.Indicator} />
      <Index each={frameworks}>
        {(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>
        )}
      </Index>
    </SegmentGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { SegmentGroup } from '@ark-ui/vue/segment-group'
import { ref } from 'vue'
import styles from 'styles/segment-group.module.css'

const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
const value = ref<string | null>(null)
</script>

<template>
  <SegmentGroup.Root :class="styles.Root" v-model="value">
    <SegmentGroup.Indicator :class="styles.Indicator" />
    <SegmentGroup.Item v-for="framework in frameworks" :key="framework" :class="styles.Item" :value="framework">
      <SegmentGroup.ItemText :class="styles.ItemText">{{ framework }}</SegmentGroup.ItemText>
      <SegmentGroup.ItemControl :class="styles.ItemControl" />
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  </SegmentGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { SegmentGroup } from '@ark-ui/svelte/segment-group'
  import styles from 'styles/segment-group.module.css'

  let value = $state<string | null>(null)

  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
</script>

<SegmentGroup.Root class={styles.Root} bind:value>
  <SegmentGroup.Indicator class={styles.Indicator} />
  {#each frameworks as 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>
  {/each}
</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**

#### React

```tsx
import { SegmentGroup, useSegmentGroup } from '@ark-ui/react/segment-group'
import styles from 'styles/segment-group.module.css'

export const RootProvider = () => {
  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
  const segmentGroup = useSegmentGroup({ defaultValue: 'React' })

  return (
    <div className="stack">
      <SegmentGroup.RootProvider className={styles.Root} value={segmentGroup}>
        <SegmentGroup.Indicator className={styles.Indicator} />
        {frameworks.map((framework) => (
          <SegmentGroup.Item className={styles.Item} key={framework} value={framework}>
            <SegmentGroup.ItemText className={styles.ItemText}>{framework}</SegmentGroup.ItemText>
            <SegmentGroup.ItemControl className={styles.ItemControl} />
            <SegmentGroup.ItemHiddenInput />
          </SegmentGroup.Item>
        ))}
      </SegmentGroup.RootProvider>
      <output>selected: {segmentGroup.value}</output>
    </div>
  )
}

```

#### Solid

```tsx
import { SegmentGroup, useSegmentGroup } from '@ark-ui/solid/segment-group'
import { Index } from 'solid-js'
import styles from 'styles/segment-group.module.css'

export const RootProvider = () => {
  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
  const segmentGroup = useSegmentGroup({ defaultValue: 'React' })

  return (
    <div class="stack">
      <output>selected: {segmentGroup().value}</output>
      <SegmentGroup.RootProvider class={styles.Root} value={segmentGroup}>
        <SegmentGroup.Indicator class={styles.Indicator} />
        <Index each={frameworks}>
          {(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>
          )}
        </Index>
      </SegmentGroup.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { SegmentGroup, useSegmentGroup } from '@ark-ui/vue/segment-group'
import styles from 'styles/segment-group.module.css'

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

const segmentGroup = useSegmentGroup({ defaultValue: 'React' })
</script>

<template>
  <div class="stack">
    <output>selected: {{ segmentGroup.value }}</output>
    <SegmentGroup.RootProvider :class="styles.Root" :value="segmentGroup">
      <SegmentGroup.Indicator :class="styles.Indicator" />
      <SegmentGroup.Item v-for="framework in frameworks" :key="framework" :class="styles.Item" :value="framework">
        <SegmentGroup.ItemText :class="styles.ItemText">{{ framework }}</SegmentGroup.ItemText>
        <SegmentGroup.ItemControl :class="styles.ItemControl" />
        <SegmentGroup.ItemHiddenInput />
      </SegmentGroup.Item>
    </SegmentGroup.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { SegmentGroup, useSegmentGroup } from '@ark-ui/svelte/segment-group'
  import styles from 'styles/segment-group.module.css'

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

  const id = $props.id()
  const segmentGroup = useSegmentGroup({ id, defaultValue: 'React' })
</script>

<div class="stack">
  <output>selected: {segmentGroup().value}</output>
  <SegmentGroup.RootProvider class={styles.Root} value={segmentGroup}>
    <SegmentGroup.Indicator class={styles.Indicator} />
    {#each frameworks as 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>
    {/each}
  </SegmentGroup.RootProvider>
</div>

```

### Disabled

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

**Example: disabled**

#### React

```tsx
import { SegmentGroup } from '@ark-ui/react/segment-group'
import styles from 'styles/segment-group.module.css'

export const Disabled = () => {
  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
  return (
    <SegmentGroup.Root className={styles.Root} defaultValue="React">
      <SegmentGroup.Indicator className={styles.Indicator} />
      {frameworks.map((framework) => (
        <SegmentGroup.Item className={styles.Item} key={framework} value={framework} disabled={framework === 'Svelte'}>
          <SegmentGroup.ItemText className={styles.ItemText}>{framework}</SegmentGroup.ItemText>
          <SegmentGroup.ItemControl className={styles.ItemControl} />
          <SegmentGroup.ItemHiddenInput />
        </SegmentGroup.Item>
      ))}
    </SegmentGroup.Root>
  )
}

```

#### Solid

```tsx
import { SegmentGroup } from '@ark-ui/solid/segment-group'
import { Index } from 'solid-js'
import styles from 'styles/segment-group.module.css'

export const Disabled = () => {
  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
  return (
    <SegmentGroup.Root class={styles.Root} defaultValue="React">
      <SegmentGroup.Indicator class={styles.Indicator} />
      <Index each={frameworks}>
        {(framework) => (
          <SegmentGroup.Item class={styles.Item} value={framework()} disabled={framework() === 'Svelte'}>
            <SegmentGroup.ItemText class={styles.ItemText}>{framework()}</SegmentGroup.ItemText>
            <SegmentGroup.ItemControl class={styles.ItemControl} />
            <SegmentGroup.ItemHiddenInput />
          </SegmentGroup.Item>
        )}
      </Index>
    </SegmentGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { SegmentGroup } from '@ark-ui/vue/segment-group'
import styles from 'styles/segment-group.module.css'

const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
</script>

<template>
  <SegmentGroup.Root :class="styles.Root" default-value="React">
    <SegmentGroup.Indicator :class="styles.Indicator" />
    <SegmentGroup.Item
      v-for="framework in frameworks"
      :key="framework"
      :class="styles.Item"
      :value="framework"
      :disabled="framework === 'Svelte'"
    >
      <SegmentGroup.ItemText :class="styles.ItemText">{{ framework }}</SegmentGroup.ItemText>
      <SegmentGroup.ItemControl :class="styles.ItemControl" />
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  </SegmentGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { SegmentGroup } from '@ark-ui/svelte/segment-group'
  import styles from 'styles/segment-group.module.css'

  const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
</script>

<SegmentGroup.Root class={styles.Root} defaultValue="React">
  <SegmentGroup.Indicator class={styles.Indicator} />
  {#each frameworks as framework}
    <SegmentGroup.Item class={styles.Item} value={framework} disabled={framework === 'Svelte'}>
      <SegmentGroup.ItemText class={styles.ItemText}>{framework}</SegmentGroup.ItemText>
      <SegmentGroup.ItemControl class={styles.ItemControl} />
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  {/each}
</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" />