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

Bruk

Eksempel

Chip.Checkbox

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

render(<CheckboxVariant />)

Chip.Removable

Hugs aria-label dersom innhaldet i Chip ikkje forklarer at den kan fjernes.

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

render(<Removable />)

Chip.Button

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

render(<AsButton />)

HTML

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.

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.

CSS variablar og data-attributter

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