Components

Chip

Chip are small, interactive components that allow users to control how they want to see content. For example, they can be used to filter categories in a search result and show which filters are active.

Overview Code Accessibility

HTMLReact

Press Enter to start editing

Unable to parse html

const PreviewEn = () => {
  return (
    <>
      <Chip.Radio name='my-radio' value='english' defaultChecked>
        English
      </Chip.Radio>
      <Chip.Radio name='my-radio' value='norwegian'>
        Norwegian
      </Chip.Radio>
    </>
  );
};

render(<PreviewEn />)

Usage

Chip uses two different HTML structures, but both have the class name ds-chip.

As radio or checkbox

Notice that we put <input> inside <label>, this means you don't need to connect them with for and 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>

As removable or button

A removable chip uses a <button> element, but data-removable="true" has been added to indicate that it is a removable chip. Then a cross will appear to the right of the chip, this is drawn with CSS.

<!-- button --><button class="ds-chip" type="button">Clear all filters</button>
<!-- removable --><button  class="ds-chip"  type="button"  data-removable="true"  aria-label="Delete Norway">  Norway</button>

With text wrapping

Chips by default force text on a single line, and truncate text with an ellipsis if it overflows. Use data-wrap="wrap" to allow multi-line text inside the chip.

CSS variables and data attributes

Chip also uses ds-input internally when it is a radio or checkbox.

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

CSS Variables
Name	Value
--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 Attributes
Name	Value
data-wrap	wrap
data-removable

React

import { Chip } from "@digdir/designsystemet-react";
// as radio<Chip.Radio name="my-chip">Radio</Chip.Radio>;
// as checkbox<Chip.Checkbox name="my-chip">Checkbox</Chip.Checkbox>;
// as removable<Chip.Removable>Removable</Chip.Removable>;
// as 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.

Edit this page on github.com (opens in a new tab)