Segment Group

#Basic usage

segment-group/basic Vue React

DayWeekMonth

segment-group/basic.vue

<script setup lang="ts">
import { SegmentGroup } from "@bysages/vue";
</script>

<template>
  <SegmentGroup.Root default-value="week">
    <SegmentGroup.Indicator />
    <SegmentGroup.Item value="day">
      <SegmentGroup.ItemText>Day</SegmentGroup.ItemText>
      <SegmentGroup.ItemControl />
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
    <SegmentGroup.Item value="week">
      <SegmentGroup.ItemText>Week</SegmentGroup.ItemText>
      <SegmentGroup.ItemControl />
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
    <SegmentGroup.Item value="month">
      <SegmentGroup.ItemText>Month</SegmentGroup.ItemText>
      <SegmentGroup.ItemControl />
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  </SegmentGroup.Root>
</template>

#Props

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemControl

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemHiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Description
`disabled`	`boolean \| undefined`	—
`invalid`	`boolean \| undefined`	—
`value`	`string`	—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the segments. The family keeps its compact register, so the rungs sit one notch below the global ladder — the default md rests at the small height.
`orientation`	`String as PropType<"horizontal" \| "vertical">`	`"horizontal"`	The tray reads as one row of seals; the underlying machine defaults to a vertical stack, so the horizontal row is ours to assert.
`defaultValue`	`string`		The initial value of the segment group when it is first rendered. Use when you do not need to control the state of the segment group.
`disabled`	`boolean`		If `true`, the segment group will be disabled
`form`	`string`		The associate form of the underlying input.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; label: string; indicator: string; item(value: string): string; itemLabel(value: string): string; itemControl(value: string): string; itemHiddenInput(value: string): string; }>`		The ids of the elements in the radio. Useful for composition.
`modelValue`	`string \| null`		The v-model value of the segment group
`name`	`string`		The name of the input fields in the radio (Useful for form submission).
`readOnly`	`boolean`		Whether the segment group is read-only