Checkbox

Sjekkboks for å velge flere alternativer.

Eksempler

Enkel checkbox

<Checkbox label="Godkjenn vilkår" />

Node som label

<Checkbox label={<span>Her er en <strong>viktig</strong> label</span>} />

Gruppe av checkboxes

Bruk CheckboxGroup for å gruppere Checkboxes.

<CheckboxGroup label="Hvilke energitiltak har du gjort?">
  <Checkbox label="Solcellepanel" />
  <Checkbox label="Isolasjon" />
  <Checkbox label="LED-pærer" />
</CheckboxGroup>

Checkbox i ulike størrelser

Bruk small, medium eller large på CheckboxGroup og Checkbox.

<CheckboxGroup label="Hvilke energitiltak har du gjort?" size="small">
  <Checkbox label="Solcellepanel" size="small" />
  <Checkbox label="Isolasjon" size="small" />
  <Checkbox label="LED-pærer" size="small" />
</CheckboxGroup>

<CheckboxGroup label="Hvilke energitiltak har du gjort?" size="medium">
  <Checkbox label="Solcellepanel" size="medium" />
  <Checkbox label="Isolasjon" size="medium" />
  <Checkbox label="LED-pærer" size="medium" />
</CheckboxGroup>

<CheckboxGroup label="Hvilke energitiltak har du gjort?" size="large">
  <Checkbox label="Solcellepanel" size="large" />
  <Checkbox label="Isolasjon" size="large" />
  <Checkbox label="LED-pærer" size="large" />
</CheckboxGroup>

Kontrollert eksempel

function ControlledExample () {
  const [checkedState, setCheckedState] = React.useState({
    solpaneler: false,
    sparelamper: false
  });

  const handleCheckboxChange = (option) => {
    setCheckedState(prevState => ({
      ...prevState,
      [option]: !prevState[option]
    }));
  }

  return (
    <form>
      <CheckboxGroup label="Hvilke energitiltak har du gjort?">
        <Checkbox
          checked={checkedState.solpaneler}
          label="solcellepaneler"
          onCheckedChange={() => handleCheckboxChange('solpaneler')}
        />
        <Checkbox
          checked={checkedState.sparelamper}
          label="sparelamper"
          onCheckedChange={() => handleCheckboxChange('sparelamper')}
        />
      </CheckboxGroup>
    </form>
  );
}

Retningslinjer

Alle sjekkbokser må ha en label.

Bruk en CheckboxGroup for å gruppere Checkboxes.

Kode

<Checkbox />

import { Checkbox } from "@aneo-org/design-react/clientComponents";

Sjekkboks.

Prop	Type	Beskrivelse
checked?	`boolean \| 'indeterminate'`	Sjekket, ikke sjekket eller ubestemt.
className?	`string`	Egen styling.
defaultChecked?	`boolean`
label	`ReactNode`	Label for sjekkboksen. Kan spesifiseres som string eller som node, f.eks "<span>Her er noe <strong>viktig</strong></span>".
onCheckedChange?	`() => void`
size?	`"small" \| "medium" \| "large"`	medium er standard.
hideLabel?	`boolean`	Bruk for å skjule label. Label vil fortsatt være mulig å lese for skjermlesere.

<CheckboxGroup />

import { CheckboxGroup } from "@aneo-org/design-react/clientComponents";

Gruppering av sjekkbokser.

Prop	Type	Beskrivelse
flexDirection	`"row" \| "row-reverse" \| "column" \| "column-reverse"`	Retning checkboxes skal plasseres.
label	`string`
size?	`"small" \| "medium" \| "large"`	medium er standard.
className?	`string`	Egen styling.