Segmented buttons

A segmented button holds two to five related options in one connected control, for choosing a view or filtering what is on screen. Use it where the options are short and worth showing all at once.

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 carries no custom properties of its own. It is drawn entirely from the Material 3 color roles, so it follows the theme wherever it sits, and overriding a role on an ancestor recolors 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, so a squarer theme squares the set off with everything else.

Accessibility

Every segment is a native <input> inside a <label>: radios for single choice, checkboxes for multiSelect. Selection, the arrow keys of a radio group, the space key and form submission all come from the browser.

The label of an option is its accessible name, including for an option that shows only labelIcon, so fill it in even where nothing is drawn. A disabled option is a disabled input and drops out of the tab order. Keep the set between two and five options; beyond that a select reads better.

API

Attributes

AttributeTypeDefaultDescription
namestringThe name of the input group
options{ label?: string, labelIcon?: Snippet, icon?: Snippet, selected?: boolean, disabled?: boolean, onclick?: (event: Event) => void }[]The options to display
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.
elementHTMLElementA reference to the root DOM element of the component. This variable is bound using bind:this, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.