useCheckboxGroup

En React-hook for å lettere håndtere en gruppe av Checkbox-komponenter.

Bruk

Under er et enkelt eksempel på hvordan du bruker useCheckboxGroup-hooken for å håndtere en gruppe med Checkbox-komponenter.

I funksjonen getCheckboxProps er første parameter value, som er en unik identifikator for alternativet, eller et objekt med props som skal legges på Checkbox-komponenten. Dersom du sender inn et objekt, må du passe på at det inneholder value.

Viktig: Dersom du skal sende props til en Checkbox, er det viktig at du sender disse som objekt til getCheckboxProps og ikke direkte på Checkbox. Ellers kan du risikere å overstyre funksjonaliteten fra useCheckboxGroup.

const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({  value: ["epost"],  ...args,});
return (  <Fieldset>    <Checkbox label="E-post" {...getCheckboxProps("epost")} />    <Checkbox label="Telefon" {...getCheckboxProps("telefon")} />    <Checkbox label="SMS" {...getCheckboxProps("sms")} />    <ValidationMessage {...validationMessageProps} />  </Fieldset>);

I response får du objektet:

{  getCheckboxProps: (value: string | CheckboxProps) => CheckboxProps, // Returnerer props du kan spre på <Checkbox /> eller <input type="checkbox" />  validationMessageProps: ValidationMessageProps, // Props du valgfritt sprer på ValidationMessage for å koble feilmelding til checkboxgruppen  setValue: string, // Funksjon for å sette checkboxgruppens verdi  value: string, // Nåværende verdi for checkboxgruppen}

Tillat indeterminate

Når du sprer getCheckboxProps på Checkboxen din, så kan du sende inn allowIndeterminate: true for å tillate at checkboxen kan være i en indeterminate tilstand.