Hopp til innhold

use­Id

Lager en unik ID som du kan bruke for å knytte elementer sammen, for eksempel med ulike aria-attributter.

Kom i gang

Se oversikten for hvordan installere pakken.

Live demo

Enkeltstående checkbox
Visning
Tema
Tetthet
const labelId = useId();

const [checked, setChecked] = React.useState(false);



const helpText = ;

const error = ;



let label = undefined;

if (helpText) {

  label = "Vedlegget har viktig informasjon om forsikringen din";

}

if (error) {

  label =

    "Du må bekrefte at du har lest vedlegget. Det har viktig informasjon om forsikringen din.";

}



return (

  <div>

    <Checkbox

      aria-describedby={labelId}

      name="confirmation"

      value="read"

      checked={checked}

      invalid={error}

      onChange={() => setChecked(!checked)}

    >

      Jeg har lest vedlegget

    </Checkbox>

    <SupportLabel

      id={labelId}

      label={label}

      labelType={error ? "error" : "help"}

    />

  </div>

);

Om den genererte IDen

Hvis du bruker React 18 er det deres useId som brukes under panseret. IDen er stabil mellom server og klient, gitt at DOMen har identisk struktur.

Hvis du derimot bruker React 17 genererer denne hooken en tilfeldig suffix med nanoid, og lagrer den med useState for å få samme ID mellom renders. IDen er ikke stabil mellom server og klient.

React API

Her finner du en oversikt over props på komponentene i pakken.