Skip to main content
Urbicon UI
source

Segment Group

Inline segment control with animated sliding indicator for single-selection scenarios.

Loading...
Loading syntax highlighting...

01 Examples

Time-Range Selector

Compact range picker for charts and dashboards. Works well with 2 to 5 options — beyond that, consider a Menu or Tab.
Loading...
Loading syntax highlighting...

Per-Item Disabled

Disable individual segments while the rest of the group stays interactive. Keyboard navigation skips disabled items.
Loading...
Loading syntax highlighting...

02 Micro-Interactions

Configured Mint

The Playground toggles single mints — for richer effects, combine multiple mints in an array, or use the object form to fine-tune intensity and duration.
Loading...
Loading syntax highlighting...

03 Choosing the Right Component

SegmentGroup

Compact mode/view switcher with animated sliding indicator. Best for 2-5 mutually exclusive options that don't control content panels. Minimal API, single neutral style.

ButtonGroup selection="single"

Toolbar-style toggle with full button styling (variants, intents, connected borders). Choose this when you need visual customization, multi-select, or connected button layouts.

RadioGroup

Form input with labels, descriptions, helper/error text, and native <input type="radio">. Choose this when collecting data in forms or when options need descriptions.

Tab

Content panel navigation where each option reveals a different panel. Uses role="tablist" semantics. Choose this when switching between content sections, not selecting a value.

04 Customization

Theme Switcher

Embedded in a settings panel with two-way binding.
Appearance
Loading...
Loading syntax highlighting...

Dashboard Toolbar

Full-width segment in a toolbar layout.

Analytics

Last updated: just now
Loading...
Loading syntax highlighting...

Gradient Pricing Toggle

slotClasses transforms the neutral control into a branded pricing switcher.
Loading...
Loading syntax highlighting...

Neon Chart Switcher

Dark-themed control with neon glow – all via slotClasses, no unstyled needed.
Loading...
Loading syntax highlighting...

Glassmorphism

Frosted glass effect with backdrop-blur on a vibrant background.
Loading...
Loading syntax highlighting...

Fully Custom (unstyled)

Drop all default styles. The sliding indicator, keyboard nav, and mint still work.
Loading...
Loading syntax highlighting...

05 Accessibility

ARIA

The container uses role="radiogroup" with each item as role="radio" + aria-checked. Provide ariaLabel to describe the group's purpose.

Keyboard

Arrow keys move between options and select immediately. Home / End jump to first/last option. Only the active item is in the tab order (roving tabindex).

Visual States

Active items expose data-state="active" for CSS-only styling in unstyled mode. The sliding indicator uses aria-hidden="true" since it is purely decorative. Focus rings use focus-visible: for keyboard-only visibility.

06 API Reference

16 props
16 props

No matching properties

No matching properties

07 Installation

Import

Loading...
Loading syntax highlighting...