All components (204)

Segmented group

Choice · SegmentedGroup · .amset-segmented

What it is and when to use it

Buttons joined into a single piece to choose one option (or several) that is applied right away: the view of a table, the period of a report, a quick filter.

When to use it

Two to five short options that change what is seen instantly.
With selection="single" (default), once an option is chosen one always remains: pressing it again does not release it. If "no filter" is needed, it goes as one more option ("All").
With selection="multiple", filters that add up and stay pressed.
iconsOnly in toolbars: the label of each option becomes its name and the tooltip on hover.

When not to

In a form that is submitted with a button: RadioGroup.
Many options or long texts: Select.
Loose actions that do not stay pressed: Button, or Toolbar.

Keyboard: with a single selection it is a native radio group: a single Tab for the whole group, and the arrow keys move and choose at once (wrapping around at the end). With multiple it is a bar of buttons that stay pressed: the arrow keys move focus (and wrap around) and Space presses. Disabled options cannot be chosen.

Accessibility: with one it is a radiogroup; with several, a toolbar of buttons with aria-pressed. In both cases the label names the group, even if it is not visible; visibleLabel puts it above and the group is named with it, in both modes. With iconsOnly the icon is decorative and the name of each button comes from its label. With a single selection and name, the value travels inside a form.

Motion: with a single selection, the fill of the chosen one slides from one option to another; with several, each fill appears with a fade in its place.

When it does not fit: the row scrolls horizontally inside its frame, instead of cutting off the last options. With a finger, no option goes below 44 px.

Focus: double and inside: the blue of the focus and a thin edge of the surface color, which is also visible on the chosen one (in light, the same blue as the focus).

Fine-tuning: variables --amset-segmented-height, -padding, -font, -label, -icon, -radius, -background, -border, -divider, -selected and -selected-ink.

What it looks like

<SegmentedGroup
  label="Shipping method"
  visibleLabel
  options={[
    { key: 'estandar', label: 'Standard' },
    { key: 'urgent', label: 'Urgent' },
    { key: 'pickup', label: 'Pickup' },
  ]}
  value={envio}
  onChange={setEnvio}
/>
<SegmentedGroup
  label="How to view the orders"
  visibleLabel
  size="sm"
  iconsOnly
  options={[
    { key: 'lista', label: 'List', icon: <ListIcon /> },
    { key: 'cuadricula', label: 'Grid', icon: <LayoutGridIcon /> },
    { key: 'calendario', label: 'Calendar', icon: <CalendarIcon /> },
  ]}
  value={vista}
  onChange={setVista}
/>

Props

Import it with import { SegmentedGroup } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Name of the group for whoever does not see the buttons. Required.
`options`required	`readonly SegmentedOption[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	—
`fullWidth`	`boolean`	—
`iconsOnly`	`boolean`	Icons only; the label becomes the accessible name and the mouse tooltip.
`initialValue`	`string \| readonly string[]`	—
`onChange`	`((key: string) => void) \| ((keys: readonly string[]) => void)`	—
`orientation`	`"horizontal" \| "vertical"`	—
`selection`	`"multiple" \| "single"`	—
`size`	`"sm" \| "md" \| "lg"`	Height of 30, 36 or 44 px, like the buttons. With touch, nothing goes below 44 px.
`value`	`string \| readonly string[] \| null`	—
`visibleLabel`	`boolean`	Shows the group's label above, instead of only announcing it.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-segmented-height`	`var(--amset-height-control)`
`--amset-segmented-padding`	`var(--amset-space-4)`
`--amset-segmented-font`	`var(--amset-text-base)`
`--amset-segmented-label`	`var(--amset-text-sm)`
`--amset-segmented-icon`	`1rem`
`--amset-segmented-radius`	`var(--amset-radius)`
`--amset-segmented-background`	`var(--amset-surface)`
`--amset-segmented-border`	`var(--amset-border-bold)`
`--amset-segmented-divider`	`var(--amset-border)`
`--amset-segmented-selected`	`var(--amset-accent)`
`--amset-segmented-selected-ink`	`var(--amset-accent-ink)`

How to change it

.amset-segmented {
  --amset-segmented-height: ...;
  --amset-segmented-padding: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: