Chip

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

Examples

Chip.Checkbox

const CheckboxVariantEn = () => {
  return <Chip.Checkbox>English</Chip.Checkbox>;
};

render(<CheckboxVariantEn />)

Chip.Removable

Remember aria-label if the contents of Chip do not explain that it can be removed.

const RemovableEn = () => {
  return <Chip.Removable aria-label='Delete Norway'>Norway</Chip.Removable>;
};

render(<RemovableEn />)

Chip.Button

const AsButtonEn = () => {
  return <Chip.Button>Clear all filters</Chip.Button>;
};

render(<AsButtonEn />)

HTML

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

Like radio or checkbox

Notice that we put <input> inside <label>, this means you don't need to connect them with for and id.

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 Chip, this is drawn with CSS.

CSS variables and data attributes

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