Chip

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

Example

Chip.Checkbox

Chip.Checkbox can be used as an alternative to Checkbox.

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

render(<CheckboxVariant />)

Chip.Removable

Chip.Removable includes a cross icon indicating that the filter can be removed.

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

render(<Removable />)

Chip.Button

Chip.Button can be used as an alternative to Button.

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.