Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Project views
  • Report settings
  • Sizes, icons, and orientation
  • Recommendations
  • Usage boundaries
  • API reference

Navigation

Segmented Control

Presents a clearable single-selection mode using native ToggleGroup keyboard behavior.

idle

Usage

import { SegmentedControl, SegmentedControlItem } from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<SegmentedControl>
	<SegmentedControlItem />
</SegmentedControl>

Examples

Project views

Choose how to browse the workspace.

Report settings

Sizes, icons, and orientation

Compact labels and icons stay aligned at every size. Disabled choices retain their selection and skip activation.

Recommendations

GuidancePractice
Do

Use short labels for a small set of peer choices. Keep the selected value visible.

Usage boundaries

GuidanceBoundary
Scope

Use Tabs for switching panels and Radio Group for a longer form question.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
value / defaultValuestring[]—Uses the ToggleGroup array contract. Single selection permits one item or an empty array; clicking the selected item clears it.
onValueChangeToggleGroupProps["onValueChange"]—Receives the selected value array and cancellable Base UI details.
size"default" | "sm" | "lg""default"Sets compact segment heights with a four-pixel surface inset.
orientation"horizontal" | "vertical""horizontal"Preserves ToggleGroup keyboard and layout orientation.
SegmentedControlItemToggle props without type or variant—Supplies the value, label, and optional disabled state. Text and icons align independently.
PreviousPaginationNextStepper

Northstar launch · In progress

Design system · In review

Selected view: list

Report settings

Choose a period. The workspace controls the managed view.