Komponenter

Chip

Chip er små, interaktive komponenter som lar brukerne styre hvordan de vil se innhold. For eksempel kan de brukes til å filtrere kategorier i et søkeresultat og vise hvilke filter som er aktive.

Oversikt Kode Tilgjengelighet

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => {
  return (
    <>
      <Chip.Radio name='my-radio' value='nynorsk' defaultChecked>
        Nynorsk
      </Chip.Radio>
      <Chip.Radio name='my-radio' value='bokmål'>
        Bokmål
      </Chip.Radio>
    </>
  );
};

render(<Preview />)

Bruk

Chip bruker to forskjellige HTML-strukturer, men begge har klassenavnet ds-chip.

Som radio eller checkbox

Legg merke til at vi legger <input> inni <label>, dette betyr at du ikke trenger å koble de sammen med for og id.

<!-- radio --><label class="ds-chip">  <input class="ds-input" type="radio" value="bokmål" name="my-radio" />  Bokmål</label>
<!-- checkbox --><label class="ds-chip">  <input class="ds-input" type="checkbox" value="value" name="my-checkbox" />  Checkbox</label>

Som removable eller button

En removable chip bruker et <button> element, men det er lagt til data-removable="true" for å indikere at det er en removable chip. Da vil et kryss vises til høyre i chip, dette tegnes med CSS.

<!-- button --><button class="ds-chip" type="button">Tøm alle filtre</button>
<!-- removable --><button  class="ds-chip"  type="button"  data-removable="true"  aria-label="Slett Norge">  Norge</button>

Med tekst over flere linjer

Chips tvinger som standard tekst til en enkelt linje, og forkorter teksten med tre punktum hvis teksten er for lang. Bruk data-wrap="wrap" dersom du ønsker å tillate tekst over flere linjer inne i chip.

CSS variablar og data-attributter

Chip bruker også ds-input internt når det er radio eller checkbox.

Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.

CSS-variabler
Navn	Verdi
--dsc-chip-background--active	var(--ds-color-surface-active)
--dsc-chip-background--checked--active	var(--ds-color-base-active)
--dsc-chip-background--checked--hover	var(--ds-color-base-hover)
--dsc-chip-background--checked	var(--ds-color-base-default)
--dsc-chip-background--hover	var(--ds-color-surface-hover)
--dsc-chip-background	var(--ds-color-surface-tinted)
--dsc-chip-border-color--checked	transparent
--dsc-chip-border-color	var(--ds-color-border-subtle)
--dsc-chip-border-radius--checkbox-input	var(--ds-border-radius-sm)
--dsc-chip-border-radius--checkbox	var(--ds-border-radius-md)
--dsc-chip-border-radius	calc(var(--dsc-chip-height)/2)
--dsc-chip-border-style	solid
--dsc-chip-border-width	var(--ds-border-width-default)
--dsc-chip-color	var(--ds-color-text-default)
--dsc-chip-height	var(--ds-size-8)
--dsc-chip-icon-size	var(--ds-icon-size)
--dsc-chip-icon-url	url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E")
--dsc-chip-input-accent-color	var(--ds-color-base-contrast-default)
--dsc-chip-input-color	var(--ds-color-text-subtle)
--dsc-chip-input-size	var(--ds-size-5)
--dsc-chip-input-stroke-color	var(--ds-color-base-default)
--dsc-chip-padding-inline	var(--ds-size-3)
--dsc-chip-spacing	calc((var(--dsc-chip-height) - var(--dsc-chip-input-size))/2)
--dsc-input-background	transparent
--dsc-input-border-color	var(--dsc-chip-input-color)
--dsc-input-accent-color	var(--dsc-chip-input-accent-color)
--dsc-input-stroke-color	var(--dsc-chip-input-stroke-color)
--dsc-input-size--toggle	var(--dsc-chip-input-size)
--dsc-input-outline-width--hover	0

Data-attributter
Navn	Verdi
data-wrap	wrap
data-removable

React

import { Chip } from "@digdir/designsystemet-react";
// som radio<Chip.Radio name="my-chip">Radio</Chip.Radio>;
// som checkbox<Chip.Checkbox name="my-chip">Checkbox</Chip.Checkbox>;
// som removable<Chip.Removable>Renovable</Chip.Removable>;
// som button<Chip.Button>Button</Chip.Button>;

command
Type: string

commandfor
Type: string

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

data-wrap
Description: Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.
Type: "nowrap" | "wrap"
Default: 'nowrap'

Name	Type	Default	Description
command	`string`	-	-
commandfor	`string`	-	-
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
data-wrap	`"nowrap" \| "wrap"`	'nowrap'	Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.

ChipRemovable

command
Type: string

commandfor
Type: string

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

data-wrap
Description: Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.
Type: "nowrap" | "wrap"
Default: 'nowrap'

Name	Type	Default	Description
command	`string`	-	-
commandfor	`string`	-	-
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
data-wrap	`"nowrap" \| "wrap"`	'nowrap'	Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.

ChipCheckbox

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

data-wrap
Description: Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.
Type: "nowrap" | "wrap"
Default: 'nowrap'

Name	Type	Default	Description
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
data-wrap	`"nowrap" \| "wrap"`	'nowrap'	Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.

ChipRadio

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

data-wrap
Description: Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.
Type: "nowrap" | "wrap"
Default: 'nowrap'

Name	Type	Default	Description
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
data-wrap	`"nowrap" \| "wrap"`	'nowrap'	Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.

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