LayoutUI
Theme Presets
Browse Components

Segmented

Choose one value from a small set of related options.

Basic

One choice, using native radio behavior.

Billing period
View Code
HTML
<fieldset class="segmented">
  <legend>
    Billing period
  </legend>
  <div class="segmented-options">
    <label>
      <input type="radio" name="billing-period" value="monthly" checked>
      <span>
        Monthly
      </span>
    </label>
    <label>
      <input type="radio" name="billing-period" value="yearly">
      <span>
        Yearly
      </span>
    </label>
  </div>
</fieldset>

Three options

Use short labels and a small set of related choices.

View
View Code
HTML
<fieldset class="segmented">
  <legend>
    View
  </legend>
  <div class="segmented-options">
    <label>
      <input type="radio" name="view" value="list" checked>
      <span>
        List
      </span>
    </label>
    <label>
      <input type="radio" name="view" value="board">
      <span>
        Board
      </span>
    </label>
    <label>
      <input type="radio" name="view" value="calendar">
      <span>
        Calendar
      </span>
    </label>
  </div>
</fieldset>

Disabled option

Unavailable choices stay visible but cannot be selected.

View
View Code
HTML
<fieldset class="segmented">
  <legend>
    View
  </legend>
  <div class="segmented-options">
    <label>
      <input type="radio" name="view" value="list" checked>
      <span>
        List
      </span>
    </label>
    <label>
      <input type="radio" name="view" value="board">
      <span>
        Board
      </span>
    </label>
    <label>
      <input type="radio" name="view" value="calendar" disabled>
      <span>
        Calendar
      </span>
    </label>
  </div>
</fieldset>

Right-to-left

Selection and arrow navigation follow reading direction.

Billing period
View Code
HTML
<div dir="rtl">
  <fieldset class="segmented">
    <legend>
      Billing period
    </legend>
    <div class="segmented-options">
      <label>
        <input type="radio" name="billing-period" value="monthly" checked>
        <span>
          Monthly
        </span>
      </label>
      <label>
        <input type="radio" name="billing-period" value="yearly">
        <span>
          Yearly
        </span>
      </label>
    </div>
  </fieldset>
</div>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.csssegmented.css
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/segmented.css">

10,178 bytes CSS including base · 0 bytes runtime JavaScript

Usage

Usage

Use fieldset.segmented with a visible legend and .segmented-options containing labels, native radio inputs and span labels. Give each group a unique name; use value, checked and disabled normally. Native arrow keys, Space, form submission and reset work without JavaScript. Use this for choosing a value; use Tabs for switching content panels.

Themes and layout

Shared surface, text, border and radius tokens follow the active theme. Keep labels readable and allow content to wrap on narrow screens.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.