Komponenter

Toggle group

Toggle group samler relaterte alternativ. Komponenten består av ei gruppe knappar som heng saman, der berre éin knapp er mogleg å velje om gongen.

Oversikt Kode Tilgjengelighet

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => {
  return (
    <ToggleGroup data-toggle-group='Filter' defaultValue='innboks'>
      <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
      <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
      <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
      <ToggleGroup.Item value='sendt'>Sendt</ToggleGroup.Item>
    </ToggleGroup>
  );
};

render(<Preview />)

Bruk

Bruker du @digdir/designsystemet-web kan du implementere toggle group ved å bruke data-toggle-group-attributtet.

<fieldset  class="ds-toggle-group"  data-toggle-group="Tekstjustering"  data-variant="secondary">  <label class="ds-button" data-variant="tertiary">    <input type="radio" name="alignment-two" value="left" checked />    Venstestilt  </label>  <label class="ds-button" data-variant="tertiary">    <input type="radio" name="alignment-two" value="center" />    Midtstilt  </label>  <label class="ds-button" data-variant="tertiary">    <input type="radio" name="alignment-two" value="right" />    Høyrestilt  </label></fieldset>

Gammel måte med `<button>`

Her må du håndtere tastaturnavigasjon og ARIA-roller sjølv.

Du kan lese om kva du må gjere for å implementere dette i tilgjengelighetsdokumentasjonen.

Klassenavnet ds-toggle-group blir lagt på ein <div> med role="radiogroup".

Kvar knapp i gruppa er ein <button> med klassenavn ds-button med role="radio" og aria-checked som indikerer om knappen er vald eller ikkje. data-variant for valde knappar skal stemme med data-variant på toggle group. Resterande knappar skal ha data-variant="tertiary".

<div class="ds-toggle-group" role="radiogroup" data-variant="primary">  <button    class="ds-button"    data-variant="primary"    type="button"    id="togglegroup-item-1"    aria-checked="true"    aria-current="true"    role="radio"  >    Innboks  </button>  <button    class="ds-button"    data-variant="tertiary"    type="button"    id="togglegroup-item-2"    aria-checked="false"    aria-current="false"    role="radio"  >    Sendt  </button></div>

CSS variablar og data-attributter

Størrelsar styrast med data-size og fargar med data-color. Komponenten vil arve næraste forelder med desse satt.

CSS-variabler
Navn	Verdi
--dsc-togglegroup-background	var(--ds-color-surface-default)
--dsc-togglegroup-border-width	var(--ds-border-width-default)
--dsc-togglegroup-border-style	solid
--dsc-togglegroup-border-color	var(--ds-color-border-default)
--dsc-togglegroup-color	var(--ds-color-text-default)
--dsc-togglegroup-spacing	0
--dsc-togglegroup-border-radius	var(--ds-border-radius-default)
--dsc-togglegroup-button-size	var(--ds-size-12)
--dsc-togglegroup-label	""
--dsc-button-background--active	var(--ds-color-base-active)
--dsc-button-background--hover	var(--ds-color-base-hover)
--dsc-button-background	var(--ds-color-base-default)
--dsc-button-color--active	var(--ds-color-base-contrast-default)
--dsc-button-color--hover	var(--ds-color-base-contrast-default)
--dsc-button-color	var(--ds-color-base-contrast-default)
--dsc-button-border-color	var(--ds-color-border-default)

Data-attributter
Navn	Verdi
data-icon
data-variant	secondary

React

import { ToggleGroup } from "@digdir/designsystemet-react";
<ToggleGroup data-toggle-group="Alternativer" defaultValue="option1">  <ToggleGroup.Item value="option1">Alternativ 1</ToggleGroup.Item>  <ToggleGroup.Item value="option2">Alternativ 2</ToggleGroup.Item></ToggleGroup>;

Eksempel på kontrollert

variant
Description: Specify which variant to use
Type: "primary" | "secondary"
Default: primary

value
Description: Controlled state for `ToggleGroup` component.
Type: string

defaultValue
Description: Default value.
Type: string

onChange
Description: Callback with selected `ToggleGroupItem` `value`
Type: ((value: string) => void)

name
Description: Form element name
Type: string

data-toggle-group
Description: Toggle group label for accessibility
Type: string

Name	Type	Default	Description
variant	`"primary" \| "secondary"`	primary	Specify which variant to use
value	`string`	-	Controlled state for `ToggleGroup` component.
defaultValue	`string`	-	Default value.
onChange	`((value: string) => void)`	-	Callback with selected `ToggleGroupItem` `value`
name	`string`	-	Form element name
data-toggle-group	`string`	-	Toggle group label for accessibility

ToggleGroupItem

value
Description: The value of the ToggleGroupItem. Generates a random value if not set.
Type: string | (string & readonly string[])

icon
Description: @deprecated Icon prop is deprecated
Type: boolean

Name	Type	Default	Description
value	`string \| (string & readonly string[])`	-	The value of the ToggleGroupItem. Generates a random value if not set.
icon	`boolean`	-	@deprecated Icon prop is deprecated

Rediger denne siden på github.com (åpnes i ny fane)