SegmentGroup

A component that allows users to select a single value from a set of options, presented as a group of segments.

Usage

A compound component used for selecting a single option from a set of options.

import { SegmentGroup } from "@elemnts-ui/react";

<SegmentGroup.Root defaultValue="daily">
  <SegmentGroup.Indicator />
  <SegmentGroup.Item value="daily">
    <SegmentGroup.ItemText>Daily</SegmentGroup.ItemText>
    <SegmentGroup.ItemControl />
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
  <SegmentGroup.Item value="weekly">
    <SegmentGroup.ItemText>Weekly</SegmentGroup.ItemText>
    <SegmentGroup.ItemControl />
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
</SegmentGroup.Root>;

Variants

The SegmentGroup supports several visual variants.

Sizes

The SegmentGroup is available in different sizes.

Vertical

Use the orientation="vertical" prop to display segments vertically.

API Reference

SegmentGroupRoot

Prop	Type	Default
asChild	`boolean`	`false`
defaultValue	`string`	-
disabled	`boolean`	-
form	`string`	-
id	`string`	-
ids	`Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string }>`	-
invalid	`boolean`	-
name	`string`	-
onValueChange	`(details: SegmentGroupValueChangeDetails) => void`	-
orientation	`"horizontal" \| "vertical"`	-
readOnly	`boolean`	-
required	`boolean`	-
value	`string`	-

SegmentGroupRootProvider

Prop	Type	Default
value	`UseSegmentGroupReturn`	required
asChild	`boolean`	`false`

SegmentGroupLabel

Prop	Type	Default
asChild	`boolean`	`false`

SegmentGroupIndicator

Prop	Type	Default
asChild	`boolean`	`false`

SegmentGroupItem

Prop	Type	Default
value	`string`	required
asChild	`boolean`	`false`
disabled	`boolean`	-
invalid	`boolean`	-

SegmentGroupItemText

Prop	Type	Default
asChild	`boolean`	`false`

SegmentGroupItemControl

Prop	Type	Default
asChild	`boolean`	`false`

SegmentGroupHiddenInput

Prop	Type	Default
asChild	`boolean`	`false`