# 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

To set up the segmented control correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="segmented-control" />

## Examples

Learn how to use the `SegmentGroup` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Initial Value

To set a default segment on initial render, use the `defaultValue` prop:

<Example id="initial-value" />

### Controlled Segment Group

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 id="controlled" />

### Disabled Segment

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

<Example id="disabled" />

### Using the Root Provider

The `RootProvider` component provides a context for the radio-group. It accepts the value of the `useRadio-group` hook.
You can leverage it to access the component state and methods from outside the radio-group.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## 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" />