Forms

Segment

Individual option inside a SegmentedControl that renders either a selection button or a route-backed link with shared segmented styling.

import { Segment } from '@lostgradient/cinder/segment';
formselection
01

Overview

Individual option inside a SegmentedControl that renders either a selection button or a route-backed link with shared segmented styling.

Usage

svelte 
<script lang="ts">
  import Segment from '@lostgradient/cinder/segment';
  import SegmentedControl from '@lostgradient/cinder/segmented-control';

  let view = $state('list');
</script>

<SegmentedControl id="view-toggle" label="View" selectionMode="single" bind:value={view}>
  <Segment value="list">List</Segment>
  <Segment value="grid">Grid</Segment>
</SegmentedControl>

Guidance

Use When

  • Authoring SegmentedControl children declaratively so consumers can compose icons, labels, and badges per segment.
  • Mixing disabled and enabled segments inside a single radiogroup/tablist where each segment carries its own metadata.
  • Rendering route filters as real links inside SegmentedControl variant="navigation".

Avoid When

  • Building a standalone toggle button — use Button or Toggle instead.
  • Selecting one option from a long list — use Select or Combobox instead.
02

When to use

Use when
  • Authoring SegmentedControl children declaratively so consumers can compose icons, labels, and badges per segment.
  • Mixing disabled and enabled segments inside a single radiogroup/tablist where each segment carries its own metadata.
  • Rendering route filters as real links inside `SegmentedControl variant="navigation"`.
Avoid when
  • Building a standalone toggle button — use Button or Toggle instead.
  • Selecting one option from a long list — use Select or Combobox instead.
03

Props

Props for segment
NameTypeDefaultDescription
value discriminated-union Value this segment represents. Must be unique within the parent control.
href discriminated-union
download discriminated-union
target discriminated-union
rel discriminated-union
current discriminated-union false
currentToken discriminated-union 'page'
disabled boolean false Disable just this segment (independent of the control-level disabled).
controls discriminated-union ID of the panel this segment controls — only meaningful when the parent SegmentedControl uses variant="tablist".
leading Snippet | undefined Optional decorative content rendered before the label, inside aria-hidden.
trailing Snippet | undefined Optional decorative content rendered after the label, inside aria-hidden.
children required snippet The segment's label content.
onclick discriminated-union