Segmented control

One choice from a few short options shown side by side, such as a message header type (No header / Text / Media / Location). For more options or longer labels, use a Radio group or a Select.

Installation

bun add @harmo-ui/css @harmo-ui/react

npm install @harmo-ui/css @harmo-ui/react

pnpm add @harmo-ui/css @harmo-ui/react

yarn add @harmo-ui/css @harmo-ui/react

bunx harmo-ui add segmented

npx harmo-ui add segmented

pnpm dlx harmo-ui add segmented

yarn dlx harmo-ui add segmented

Usage

import { Segmented, SegmentedOption } from "@harmo-ui/react";

<Segmented label="Message header" name="header-type" defaultValue="none">
  <SegmentedOption value="none">No header</SegmentedOption>
  <SegmentedOption value="text">Text</SegmentedOption>
  <SegmentedOption value="media">Media</SegmentedOption>
  <SegmentedOption value="location">Location</SegmentedOption>
</Segmented>

Examples

This site is using your theme

Options

Each option wraps a native radio, so the group works in forms, Tab reaches the chosen option, and the Arrow keys move the choice. role="radiogroup" names the group from its label.

Message header

No headerTextMediaLocation

<Segmented label="Message header" name="header-type" defaultValue="none">
  <SegmentedOption value="none">No header</SegmentedOption>
  <SegmentedOption value="text">Text</SegmentedOption>
  <SegmentedOption value="media">Media</SegmentedOption>
  <SegmentedOption value="location">Location</SegmentedOption>
</Segmented>

<div class="hfield">
  <span class="hlabel" id="header-type-label">Message header</span>
  <div class="hsegmented" role="radiogroup" aria-labelledby="header-type-label">
    <label class="hsegmented-option">
      <input type="radio" name="header-type" value="none" checked />No header
    </label>
    <label class="hsegmented-option">
      <input type="radio" name="header-type" value="text" />Text
    </label>
    <label class="hsegmented-option">
      <input type="radio" name="header-type" value="media" />Media
    </label>
    <label class="hsegmented-option">
      <input type="radio" name="header-type" value="location" />Location
    </label>
  </div>
</div>

Disabled option

disabled on an option's radio dims that option.

Assign to

TeamAgentAI agent

<Segmented label="Assign to" name="assign" defaultValue="team">
  <SegmentedOption value="team">Team</SegmentedOption>
  <SegmentedOption value="agent">Agent</SegmentedOption>
  <SegmentedOption value="ai" disabled>
    AI agent
  </SegmentedOption>
</Segmented>

<div class="hfield">
  <span class="hlabel" id="assign-label">Assign to</span>
  <div class="hsegmented" role="radiogroup" aria-labelledby="assign-label">
    <label class="hsegmented-option">
      <input type="radio" name="assign" value="team" checked />Team
    </label>
    <label class="hsegmented-option">
      <input type="radio" name="assign" value="agent" />Agent
    </label>
    <label class="hsegmented-option">
      <input type="radio" name="assign" value="ai" disabled />AI agent
    </label>
  </div>
</div>

Narrow container

Labels never wrap. When the options can't all fit on one row, drawn dashed here, they move to a new one.

Message header

No headerTextMediaLocation

<Segmented
  label="Message header"
  name="header-type-narrow"
  defaultValue="none"
>
  <SegmentedOption value="none">No header</SegmentedOption>
  <SegmentedOption value="text">Text</SegmentedOption>
  <SegmentedOption value="media">Media</SegmentedOption>
  <SegmentedOption value="location">Location</SegmentedOption>
</Segmented>

<div class="hfield">
  <span class="hlabel" id="header-type-narrow-label">Message header</span>
  <div class="hsegmented" role="radiogroup" aria-labelledby="header-type-narrow-label">
    <label class="hsegmented-option">
      <input type="radio" name="header-type-narrow" value="none" checked />No header
    </label>
    <label class="hsegmented-option">
      <input type="radio" name="header-type-narrow" value="text" />Text
    </label>
    <label class="hsegmented-option">
      <input type="radio" name="header-type-narrow" value="media" />Media
    </label>
    <label class="hsegmented-option">
      <input type="radio" name="header-type-narrow" value="location" />Location
    </label>
  </div>
</div>

API reference

React

<Segmented> renders the group, with a <SegmentedOption> for each option; with label, it also renders the Field and label above it. Without label, name it with aria-label, or place it in a Setting, which names it. Other props are the group <div>'s attributes.

Prop	Effect
`label`	The label above it
`name`	The name its options submit under; generated when left out
`value` or `defaultValue`	The chosen option's value
`onValueChange`	Called with the newly chosen value
`required`, `disabled`	Set on every option

<SegmentedOption> takes its value, its text as children, and optionally disabled. Its className and style go to the option's <label>, and its other props to the radio inside.

HTML

A <div class="hsegmented" role="radiogroup"> with aria-labelledby or aria-label. Each .hsegmented-option is a <label> wrapping an <input type="radio"> and its text, with the same name on every radio. Load segmented.css; field.css for the label. It needs no script.

Hook	Effect
`checked` on a radio	The chosen option
`disabled` on a radio	That option dimmed, not-allowed cursor

See Segmented control's full contract.

Accessibility

Each option wraps a native radio, so the group works in forms, Tab reaches the chosen option, and the Arrow keys move the choice. The radios are invisible but stay focusable, and role="radiogroup" with aria-labelledby names the group.