# Segment Group

URL: https://ark-ui.com/docs/components/segment-group
LLM: https://ark-ui.com/llms.txt/components/segment-group

Organizes and navigates between sections in a view.

---



## Anatomy



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

## Examples

```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>
  )
}
```

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

```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>
  )
}
```

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

```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>
  )
}
```

### Disabled

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

```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>
  )
}
```

## API Reference

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`defaultValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial value of the checked radio when rendered.
Use when you don't need to control the value of the segment group.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: If `true`, the segment group will be disabled

**`form`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The associate form of the underlying input.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  root: string
  label: string
  indicator: string
  item: (value: string) => string
  itemLabel: (value: string) => string
  itemControl: (value: string) => string
  itemHiddenInput: (value: string) => string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the radio. Useful for composition.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: If `true`, the segment group is marked as invalid.

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name of the input fields in the radio
(Useful for form submission).

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called once a radio is checked

**`orientation`**
Type: `'horizontal' | 'vertical'`
Required: false
Default Value: `undefined`
Description: Orientation of the segment group

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the segment group is read-only

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: If `true`, the segment group is marked as required.

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled value of the segment group

#### Data Attributes

**`data-scope`**: segment-group
**`data-part`**: root
**`data-orientation`**: The orientation of the segment-group
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

### Indicator

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: segment-group
**`data-part`**: indicator
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the indicator

### ItemControl

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: segment-group
**`data-part`**: item-control
**`data-active`**: Present when active or pressed

### ItemHiddenInput

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Item

#### Props

**`value`**
Type: `string`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: undefined

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: undefined

### ItemText

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Label

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: segment-group
**`data-part`**: label
**`data-orientation`**: The orientation of the label
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

### RootProvider

#### Props

**`value`**
Type: `UseRadioGroupReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

## Accessibility

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

### Keyboard Support

**`Tab`**
Description: Moves focus to either the checked radio item or the first radio item in the group.

**`Space`**
Description: When focus is on an unchecked radio item, checks it.

**`ArrowDown`**
Description: Moves focus and checks the next radio item in the group.

**`ArrowRight`**
Description: Moves focus and checks the next radio item in the group.

**`ArrowUp`**
Description: Moves focus to the previous radio item in the group.

**`ArrowLeft`**
Description: Moves focus to the previous radio item in the group.