Segmented

Switch quickly among a small set of exclusive filters or parameters, with keyboard and form support.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Segmented to choose one of several mutually exclusive parameters or filters. It uses radiogroup semantics. Use Tab when switching between content panels or views.

Bind a stable option value with bind:value. If the value is missing or does not match, the first option is only a visual fallback; it does not write to the binding. Initialize the value explicitly for forms.
For explicit children, use Button as="item". A nonempty name adds a hidden form field. The application restores its business value on form reset.

Import

import { Segmented } from '@snowui-design-system/components';

Usage

Variants

Sizes

Vertical

Fill

Composition

Form

API Reference

Property	Type	Default	Example	Description
`value`	`string`	`—`	`value="all"`	Unique value of the current option; supports bind:value and updates when an option is activated by click or arrow key. A missing or unmatched value visually falls back to the first available option without writing back to the binding. Initialize it explicitly in forms.
`name`	`string`	`—`	`name="frequency"`	When nonempty, outputs a hidden field of the same name for native FormData. An undefined value submits as an empty string. Place it inside the form; restore the bound initial business value in reset handling.
`children`	`Snippet`	`—`	`<Segmented value="all"><Button as="item" value="all">All</Button><Button as="item" value="component">Component</Button></Segmented>`	Explicit option content with no parameters. Use Button as="item" and a unique value for each option. Takes priority over items and allows Button Props to be set per option.
`class`	`string`	`""`	`class="my-component"`	External class merged onto the real Tab root while retaining the Segmented marker. Does not affect the hidden form field.
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={{ Button: { scaleOnHover: false } }}`	Configure Buttons generated in items mode through parts.Button, such as scaleOnHover. Does not override explicit child options and does not expose parts.Tab.