Segmented

Inline toggle for switching between mutually exclusive options.

Import

import { Segmented } from 'asterui'

Examples

Basic Usage

Simple segmented control for view switching.

</>

ListGridTable

Selected: List

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [view, setView] = useState('List')
  
  return (
      <div>
        <Segmented value={view} onChange={(v) => setView(v as string)}>
          <Segmented.Item value="List">List</Segmented.Item>
          <Segmented.Item value="Grid">Grid</Segmented.Item>
          <Segmented.Item value="Table">Table</Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">Selected: {view}</p>
      </div>
    )
}

export default App

Disabled Items

Individual items can be disabled.

</>

DailyWeeklyMonthlyYearly

Selected: week

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [period, setPeriod] = useState('week')
  
  return (
      <div>
        <Segmented value={period} onChange={(v) => setPeriod(v as string)}>
          <Segmented.Item value="day">Daily</Segmented.Item>
          <Segmented.Item value="week">Weekly</Segmented.Item>
          <Segmented.Item value="month">Monthly</Segmented.Item>
          <Segmented.Item value="year" disabled>Yearly</Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">Selected: {period}</p>
      </div>
    )
}

export default App

Sizes

Four size options available.

</>

SML

SML

SML

SML

import { Segmented, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" gap="md">
        <Segmented size="xs" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="sm" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="md" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="lg" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
      </Space>
    )
}

export default App

Block Mode

Full width with equally sized options.

</>

LeftCenterRight

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [align, setAlign] = useState('Center')
  
  return (
      <div className="w-full max-w-md">
        <Segmented value={align} onChange={(v) => setAlign(v as string)} block>
          <Segmented.Item value="Left">Left</Segmented.Item>
          <Segmented.Item value="Center">Center</Segmented.Item>
          <Segmented.Item value="Right">Right</Segmented.Item>
        </Segmented>
      </div>
    )
}

export default App

Disabled

Disabled state for the entire control.

</>

Option AOption BOption C

import { Segmented } from 'asterui'

function App() {
  return (
      <Segmented defaultValue="A" disabled>
        <Segmented.Item value="A">Option A</Segmented.Item>
        <Segmented.Item value="B">Option B</Segmented.Item>
        <Segmented.Item value="C">Option C</Segmented.Item>
      </Segmented>
    )
}

export default App

With Icons

Options with icons and labels.

</>

ListGrid

View: list

import { Segmented } from 'asterui'
import { Bars3Icon, Squares2X2Icon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [view, setView] = useState('list')
  
  return (
      <div>
        <Segmented value={view} onChange={(v) => setView(v as string)}>
          <Segmented.Item value="list" icon={<Bars3Icon size="sm" />}>
            List
          </Segmented.Item>
          <Segmented.Item value="grid" icon={<Squares2X2Icon size="sm" />}>
            Grid
          </Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">View: {view}</p>
      </div>
    )
}

export default App

API

Segmented

Property	Description	Type	Default
value	Currently selected value (controlled)	string | number	-
defaultValue	Default selected value (uncontrolled)	string | number	-
onChange	Callback when selection changes	(value: string | number) => void	-
size	Size of the control	'xs' | 'sm' | 'md' | 'lg'	'md'
block	Take full width of container	boolean	false
disabled	Disable all options	boolean	false
className	Additional CSS class	string	-
children	Segmented.Item components	ReactNode	-

Segmented.Item

Property	Description	Type	Default
value	Option value (required)	string | number	-
disabled	Disable this option	boolean	false
icon	Icon before label	ReactNode	-
children	Label content	ReactNode	-
className	Additional CSS class	string	-

When to Use

• View toggles: Switch between List/Grid/Table views
• Time periods: Day/Week/Month/Year filters
• Size selectors: S/M/L/XL options
• Alignment: Left/Center/Right controls
• Mode switches: Light/Dark theme toggles

Segmented vs Radio.Group

Segmented	Radio.Group
Immediate UI state changes	Form field values
Compact, button-like appearance	Traditional radio buttons
Always visible options	Can have many options
2-5 options typically	Any number of options