Components

SegmentedControl

Pill-shaped single-selection control for switching between views or filters

Overview

The SegmentedControl component provides a pill-shaped control for mutually exclusive options, commonly used for view switching or filter selection. It features smooth transitions, clear visual feedback, and keyboard navigation support.

Import

import { SegmentedControl } from "@px-ui/core";

Usage

DayWeekMonthYear

<SegmentedControl.Root defaultValue="week">
  <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
  <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
  <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
  <SegmentedControl.Item value="year">Year</SegmentedControl.Item>
</SegmentedControl.Root>

Examples

Sizes

The SegmentedControl.Item component supports three size variants.

{/* Small */}
<SegmentedControl.Root defaultValue="list">
  <SegmentedControl.Item value="list" size="sm">List</SegmentedControl.Item>
  <SegmentedControl.Item value="grid" size="sm">Grid</SegmentedControl.Item>
</SegmentedControl.Root>

{/* Default */}
<SegmentedControl.Root defaultValue="list">
  <SegmentedControl.Item value="list" size="default">List</SegmentedControl.Item>
  <SegmentedControl.Item value="grid" size="default">Grid</SegmentedControl.Item>
</SegmentedControl.Root>

{/* Large */}
<SegmentedControl.Root defaultValue="list">
  <SegmentedControl.Item value="list" size="lg">List</SegmentedControl.Item>
  <SegmentedControl.Item value="grid" size="lg">Grid</SegmentedControl.Item>
</SegmentedControl.Root>

With Icons

Combine icons with text labels for better visual recognition.

ListGridCards

<SegmentedControl.Root defaultValue="list">
  <SegmentedControl.Item value="list" className="gap-2">
    <ListIcon />
    List
  </SegmentedControl.Item>
  <SegmentedControl.Item value="grid" className="gap-2">
    <GridIcon />
    Grid
  </SegmentedControl.Item>
  <SegmentedControl.Item value="cards" className="gap-2">
    <CardsIcon />
    Cards
  </SegmentedControl.Item>
</SegmentedControl.Root>

Anatomy

Components that make up SegmentedControl:

SegmentedControl.Root

The container component that manages the segmented control state.

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI RadioGroup including value, defaultValue, onValueChange, disabled, etc.

SegmentedControl.Item

Individual segment within the control.

Custom Props:

Prop	Type	Default	Description
`variant`	`"default"`	`"default"`	Visual style variant
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Size of the segment
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI Radio.Root including value, disabled, etc.

API Reference

See the Anatomy section above for detailed prop information for each component.

RadioGroup

Single-selection control for mutually exclusive options with multiple sizes

Select Field

A simplified select component wrapper for common use cases with automatic label detection and type-safe selection

SegmentedControl

On this page