Chip

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 />)

Use chip when

• users need to filter information, for example in lists or tables
• active filters should be displayed

Avoid chip when

• you need to show status or numbers, use badge instead
• content should be labelled with a non-interactive category or topic, use tag instead
• you are creating menus or navigation elements

Examples

Chip as checkbox

Use this variant when the user can select one or more options, for example to filter a search or a list.

Unable to parse html

const CheckboxVariant = () => {
  return <Chip.Checkbox>Nynorsk</Chip.Checkbox>;
};

render(<CheckboxVariant />)

Chip as filter

Shows an active filter that the user can remove. The cross on the right indicates that the filter can be removed with a single click.

Unable to parse html

const Removable = () => {
  return <Chip.Removable aria-label='Slett Norge'>Norge</Chip.Removable>;
};

render(<Removable />)

Chip as button

Use this variant when the chip should trigger an action, for example to clear all active filters.

Unable to parse html

const AsButton = () => {
  return <Chip.Button>Tøm alle filtre</Chip.Button>;
};

render(<AsButton />)

Guidelines

Chip allows users to control how they want to display content.

Avoid placing chip vertically. If you need to show options stacked vertically, use checkbox or radio instead. A group of chip components may wrap across multiple lines.

Text

Chip should contain as few words as possible, preferably just one or two.