Segmented buttons

A segmented button holds two to five related options in one connected control. Use it to choose a view or filter what is on screen, when the options are short and should all be visible.

Single choice

<script lang="ts">
	import { SegmentedButton } from 'noph-ui'
</script>

<SegmentedButton
	name="demo"
	options={[
		{
			label: 'Week',
			selected: true,
		},
		{
			label: 'Month',
		},
		{
			label: 'Year',
		},
	]}
/>

Multiple choice

<script lang="ts">
	import { SegmentedButton } from 'noph-ui'
</script>

<SegmentedButton
	name="demo2"
	multiSelect
	options={[
		{
			label: 'XS',
		},
		{
			label: 'S',
		},
		{
			label: 'M',
		},
		{
			label: 'L',
		},
		{
			label: 'XL',
		},
	]}
/>

Icons

<script lang="ts">
	import { SegmentedButton } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

{#snippet darkIcon()}
	<Icon>dark_mode</Icon>
{/snippet}

{#snippet lightIcon()}
	<Icon>light_mode</Icon>
{/snippet}

{#snippet systemIcon()}
	<Icon>brightness_medium</Icon>
{/snippet}
<SegmentedButton
	name="demo3"
	options={[
		{
			label: 'Dark',
			icon: darkIcon,
		},
		{
			label: 'System',
			icon: systemIcon,
			selected: true,
		},
		{
			label: 'Light',
			icon: lightIcon,
		},
	]}
/>
<SegmentedButton
	name="demo4"
	options={[
		{
			labelIcon: darkIcon,
		},
		{
			labelIcon: systemIcon,
			selected: true,
		},
		{
			labelIcon: lightIcon,
		},
	]}
/>

Disabled

<script lang="ts">
	import { SegmentedButton } from 'noph-ui'
</script>

<SegmentedButton
	name="demo5"
	options={[
		{
			label: 'Apple',
			disabled: true,
		},
		{
			label: 'Banana',
			selected: true,
		},
		{
			label: 'Orange',
		},
	]}
/>

Theming

The segmented button has no custom properties of its own. It uses the Material 3 color roles, so it follows the theme. Override a role on an ancestor to recolor it.

RoleWhere it shows
--np-color-secondary-containerBackground of a selected segment.
--np-color-on-secondary-containerLabel and check mark of a selected segment.
--np-color-on-surfaceLabel of an unselected segment.
--np-color-outlineThe outline around the set and between the segments.
--np-color-errorOutline and label once issues reports a problem.

The shape comes from --np-shape-corner-full and changes with it.

Accessibility

Every segment is a native <input> inside a <label>: radios for single choice in a role="radiogroup", checkboxes for multiSelect. Selection, the arrow keys of a radio group, the space key and form submission work like native inputs. Checkboxes get the same single tab stop and arrow keys as radios. Enter picks the focused segment instead of submitting the form. Each segment keeps a 48px tall target.

The label of an option is its accessible name, also for an option that shows only labelIcon. Always set it. A disabled option is a disabled input and leaves the tab order. Keep the set between two and five options. For more, use a select.

API

Attributes

AttributeTypeDefaultDescription
namestringThe name of the input group
options{ value?: string | number, label?: string, labelIcon?: Snippet, icon?: Snippet, selected?: boolean, disabled?: boolean, onclick?: (event: Event) => void }[]The options to display. value goes into group and the form data. Without it, the option uses its label.
multiSelectbooleanfalseWhether to allow multiple options to be selected

Bindables

AttributeTypeDescription
groupstring | number | (string | number)[] | null | undefinedThe selected value, or an array of them with multiSelect. Bind it to read and set the selection.
elementHTMLElementThe root DOM element of the component, bound with bind:this.