Segment

free

Segment switches between a few related options from one compact control.

import Segment from '@/components/ui/segment';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Segment

pnpm dlx nateui@latest add Segment

yarn dlx nateui@latest add Segment

Examples

Basic

import Segment from '@/components/ui/segment';

export default function BasicDemo() {
  return (

Size

import Segment from '@/components/ui/segment';

export default function SizeDemo() {
  return (

Multiple Selection

import Segment from '@/components/ui/segment';

export default function MultipleDemo() {
  return (

With Icons

import Segment from '@/components/ui/segment';
import {
    PiTextAlignCenter,
    PiTextAlignLeft,

Disabled

import Segment from '@/components/ui/segment';

export default function DisabledDemo() {
  return (

Controlled

Active view: board

import { useState } from 'react';
import Segment from '@/components/ui/segment';

export default function ControlledDemo() {

API

Segment is a compound control: the Segment root holds selection state and renders the sliding indicator, while each Segment.Item is one selectable option. In single mode selecting the active item again clears the selection; in multiple mode each item toggles independently.

Segment

Prop	Description	Type	Default
`selectionType`	Whether one item or several items can be active at once.	`'single' \| 'multiple'`	`'single'`
`value`	Active value in controlled mode. A string for single selection, an array for multiple.	`SegmentValue`	-
`defaultValue`	Initial value when uncontrolled. A string for single selection, an array for multiple.	`SegmentValue`	-
`onChange`	Fires with the new value whenever the selection changes.	`(value: SegmentValue) => void`	-
`size`	Control size applied to every item, unless an item sets its own.	`ControlSize`	`'md'`
`className`	Class names for the root element.	`string`	-
`ref`	Ref forwarded to the root element.	`Ref<HTMLDivElement>`	-
`...nativeProps`	Native props for the root `div` (except `onChange`).	`Omit<ComponentProps<'div'>, 'onChange'>`	-

Segment.Item

Prop	Description	Type	Default
`value`	Unique value that identifies this item within the group.	`string`	-
`children`	Item content, or a render function that receives the item state for a custom look.	`ReactNode \| ((params: SegmentItemRenderProps) => ReactNode)`	-
`disabled`	Prevent this item from being selected and dim it.	`boolean`	`false`
`size`	Control size for this item, overriding the group size.	`ControlSize`	-
`className`	Class names for the item button.	`string`	-
`ref`	Ref forwarded to the item button.	`Ref<HTMLButtonElement>`	-
`...nativeProps`	Native `button` props (except `children`).	`Omit<ComponentPropsWithRef<'button'>, 'children'>`	-

Types

type ControlSize = 'sm' | 'md' | 'lg'
 
// string for single selection, string[] for multiple selection
type SegmentValue = string | string[]
 
type SegmentItemRenderProps = {
  active: boolean
  disabled: boolean
  value: string
  onSegmentItemClick: () => void
}