Segmented

Usage

Put beta-segmented on a div. Each segment is a native radio, so arrow keys move between them and the form posts the chosen value. Keyboard focus rings the segment.

name, value string

The form field name and the selected option’s value.

options SegmentedOption

Value, Label, an optional icon from the beta registry, an optional Href that makes the option a link, and Attributes for the radio or link.

kind string

theme applies the chosen theme as it changes.

label string

The accessible name of the group.

data-analytics intent

The intent each radio sends on change, ending in a verb such as select.

disabled bool

Disables every segment.

In script, segmentedMarkup(name, value, choices, { label, analytics, kind, disabled }) from segmented.js draws the same radios.

Source Components/Beta/Segmented/