Skip to content

Capsule Toggle

Choose one of two or three options in a capsule.

import { CapsuleToggle, CapsuleToggleOption } from '@youj/react'

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use a capsule toggle for a small choice that sits with other floating controls: a monitor source, a layout, a snap setting. It's a Segmented Control that uses the capsule as its track, so the selected option glides inside the pill. For more than three options, use a Segmented Control or Tabs.

import { CapsuleToggle } from '@youj/react'

<CapsuleToggle
  label="Monitor"
  value={monitor}
  onValueChange={setMonitor}
  options={[
    { value: 'source', label: 'Source' },
    { value: 'mix', label: 'Mix' },
    { value: 'master', label: 'Master' },
  ]}
/>

label puts a short name in front of the options. iconOnly shows only each option's icon, and its label becomes the option's name.

Reference

Propsoptions, label, iconOnly… (9)

Props

CapsuleToggle props
PropType
optionsRequiredreadonly CapsuleToggleOption[]

Two or three options.

–
labelstring

A short eyebrow at the start ("View"). It names the group too, unless aria-label does.

–
iconOnlyboolean

Shows only the icons; each option is named by its label.

default false

false
size'sm' | 'default'

default 'default'

'default'
aria-labelstring

Names the control for assistive tech, e.g. "View" or "Range".

–
variant'underline' | 'pill'

underline (a bar on a hairline) or pill (a raised key in a recessed track).

default 'underline'

'underline'
defaultValuestring

The segment pressed at first (uncontrolled). Leave it out to start with none pressed.

–
valuestring

The pressed segment's value (controlled).

–
soundboolean

With sound on (YoujProvider’s sound), a new choice plays select. false keeps this one silent.

default true

true
onValueChange(value: string) => void

Called with the newly pressed segment's value. Never called with an empty value.

–
StylingParts and class names

Styling

Parts: capsule-toggle, capsule-label, then the segmented control's own segmented-control, segmented-control-item and toggle-group-indicator.

MotionChoose

Motion

Motion tokens
MomentTokens
Choosethe selected key glides to the new option, and changes course if you choose again mid-way
spring.smooth

0.36s, bounce 0

0.36s, bounce 0

Reduced motion

The key jumps to the new option.

AccessibilityKeyboard, ARIA

Accessibility

  • It's a group named by label or aria-label, with one tab stop. The arrow keys move between options.
  • One option is always selected, and each option says whether it's pressed.
  • With sound on, a new choice plays select. sound={false} turns it off.