Segment Group
Organizes and navigates between sections in a view.
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-partattribute to help identify them in the DOM.
Examples
Learn how to use the SegmentGroup component in your project. Let’s take a look
at the most basic example:
import { SegmentGroup } from '@ark-ui/react'
const Basic = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
return (
<SegmentGroup.Root>
<SegmentGroup.Indicator />
{frameworks.map((framework) => (
<SegmentGroup.Item key={framework} value={framework}>
<SegmentGroup.ItemText>{framework}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
))}
</SegmentGroup.Root>
)
}
import { SegmentGroup } from '@ark-ui/solid'
import { Index } from 'solid-js'
const Basic = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
return (
<SegmentGroup.Root>
<SegmentGroup.Indicator />
<Index each={frameworks}>
{(framework) => (
<SegmentGroup.Item value={framework()}>
<SegmentGroup.ItemText>{framework()}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
)}
</Index>
</SegmentGroup.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { SegmentGroup } from '@ark-ui/vue'
const frameworks = ref(['React', 'Solid', 'Svelte', 'Vue'])
const value = ref('React')
</script>
<template>
<SegmentGroup.Root>
<SegmentGroup.Indicator />
<SegmentGroup.Item v-for="framework in frameworks" :key="framework" :value="framework">
<SegmentGroup.ItemText>{{ framework }}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
</SegmentGroup.Root>
</template>
Initial Value
To set a default segment on initial render, use the defaultValue prop:
import { SegmentGroup } from '@ark-ui/react'
const InitialValue = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
return (
<SegmentGroup.Root defaultValue="React">
<SegmentGroup.Indicator />
{frameworks.map((framework) => (
<SegmentGroup.Item key={framework} value={framework}>
<SegmentGroup.ItemText>{framework}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
))}
</SegmentGroup.Root>
)
}
import { SegmentGroup } from '@ark-ui/solid'
import { Index } from 'solid-js'
const InitialValue = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
return (
<SegmentGroup.Root value="React">
<SegmentGroup.Indicator />
<Index each={frameworks}>
{(framework) => (
<SegmentGroup.Item value={framework()}>
<SegmentGroup.ItemText>{framework()}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
)}
</Index>
</SegmentGroup.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { SegmentGroup } from '@ark-ui/vue'
const frameworks = ref(['React', 'Solid', 'Svelte', 'Vue'])
const value = ref('React')
</script>
<template>
<SegmentGroup.Root model-value="React">
<SegmentGroup.Indicator />
<SegmentGroup.Item v-for="framework in frameworks" :key="framework" :value="framework">
<SegmentGroup.ItemText>{{ framework }}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
</SegmentGroup.Root>
</template>
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:
import { SegmentGroup } from '@ark-ui/react'
import { useState } from 'react'
const Controlled = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
const [value, setValue] = useState('React')
return (
<SegmentGroup.Root value={value} onValueChange={(e) => setValue(e.value)}>
<SegmentGroup.Indicator />
{frameworks.map((framework) => (
<SegmentGroup.Item key={framework} value={framework}>
<SegmentGroup.ItemText>{framework}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
))}
</SegmentGroup.Root>
)
}
import { SegmentGroup } from '@ark-ui/solid'
import { Index, createSignal } from 'solid-js'
const Controlled = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
const [value, setValue] = createSignal('React')
return (
<SegmentGroup.Root value={value()} onValueChange={(e) => setValue(e.value)}>
<SegmentGroup.Indicator />
<Index each={frameworks}>
{(framework) => (
<SegmentGroup.Item value={framework()}>
<SegmentGroup.ItemText>{framework()}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
)}
</Index>
</SegmentGroup.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { SegmentGroup } from '@ark-ui/vue'
const frameworks = ref(['React', 'Solid', 'Svelte', 'Vue'])
const value = ref('React')
</script>
<template>
<SegmentGroup.Root v-model="value">
<SegmentGroup.Indicator />
<SegmentGroup.Item v-for="framework in frameworks" :key="framework" :value="framework">
<SegmentGroup.ItemText>{{ framework }}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
</SegmentGroup.Root>
</template>
Disabled Segment
To disable a segment, simply pass the disabled prop to the SegmentGroup.Item
component:
import { SegmentGroup } from '@ark-ui/react'
const Disabled = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
return (
<SegmentGroup.Root defaultValue="React">
<SegmentGroup.Indicator />
{frameworks.map((framework) => (
<SegmentGroup.Item key={framework} value={framework} disabled={framework === 'Svelte'}>
<SegmentGroup.ItemText>{framework}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
))}
</SegmentGroup.Root>
)
}
import { SegmentGroup } from '@ark-ui/solid'
import { Index } from 'solid-js'
const Disabled = () => {
const frameworks = ['React', 'Solid', 'Svelte', 'Vue']
return (
<SegmentGroup.Root value={'React'}>
<SegmentGroup.Indicator />
<Index each={frameworks}>
{(framework) => (
<SegmentGroup.Item value={framework()} disabled={framework() === 'Svelte'}>
<SegmentGroup.ItemText>{framework()}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
)}
</Index>
</SegmentGroup.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { SegmentGroup } from '@ark-ui/vue'
const frameworks = ref(['React', 'Solid', 'Svelte', 'Vue'])
const value = ref('React')
</script>
<template>
<SegmentGroup.Root model-value="React">
<SegmentGroup.Indicator />
<SegmentGroup.Item
v-for="framework in frameworks"
:key="framework"
:value="framework"
:disabled="framework === 'Svelte'"
>
<SegmentGroup.ItemText>{{ framework }}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
</SegmentGroup.Item>
</SegmentGroup.Root>
</template>
API Reference
Item
value | string | |
asChildRender as a different element type. | boolean | |
disabled | boolean | |
invalid | boolean |
Root
asChildRender as a different element type. | boolean | |
defaultValueThe initial value of the segment group. | string | |
dirThe document's text/writing direction. | 'ltr' | 'rtl' | "ltr" |
disabledIf `true`, the radio group will be disabled | boolean | |
formThe associate form of the underlying input. | string | |
getRootNodeA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | () => Node | ShadowRoot | Document | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the radio. Useful for composition. | Partial<{
root: string
label: string
indicator: string
item(value: string): string
itemLabel(value: string): string
itemControl(value: string): string
itemHiddenInput(value: string): string
}> | |
nameThe name of the input fields in the radio (Useful for form submission). | string | |
onValueChangeFunction called once a radio is checked | (details: ValueChangeDetails) => void | |
orientationOrientation of the radio group | 'horizontal' | 'vertical' | |
valueThe value of the checked radio | string |
Label
asChildRender as a different element type. | boolean |
ItemText
asChildRender as a different element type. | boolean |
Indicator
asChildRender as a different element type. | boolean |
ItemControl
asChildRender as a different element type. | boolean |
Previous
Rating GroupNext
Select