Field

const Preview = () => {
  return (
    <Field>
      <Label>Etternavn</Label>
      <Field.Description>
        Etternavn kan ikke inneholde mellomrom
      </Field.Description>
      <Input defaultValue='Nordmann Svenske' />
      <ValidationMessage>
        Du kan ikke ha mellomrom i etternavnet ditt
      </ValidationMessage>
    </Field>
  );
};

render(<Preview />)

Bruk Field når

• du skal sørge for at Label, Field.Description, ValidationMessage og Field.Counter er riktig koblet til et felt

Unngå Field når

• du skal semantisk gruppere flere felt - bruk heller Fieldset

Eksempel

Prefix/Suffix

Prefixer og suffixer er nyttige for å vise enheter, valuta eller andre typer informasjon som er relevant for feltet. Du skal ikke bruke disse alene, siden skjermlesere ikke leser dem opp. Det er viktig at samme informasjon som vises i prefixet eller suffixet også er inkludert i ledeteksten.

const Affix = () => (
  <Field>
    <Label>Hvor mange kroner koster det per måned?</Label>
    <Field.Affixes>
      <Field.Affix>NOK</Field.Affix>
      <Input />
      <Field.Affix>pr. mnd.</Field.Affix>
    </Field.Affixes>
  </Field>
);

render(<Affix />)

Antall tegn

Bruk Field.Counter til å informere om antall tegn brukerne kan skrive i feltet.

const Counter = () => (
  <Field>
    <Label>Legg til en beskrivelse</Label>
    <Textarea rows={2} />
    <Field.Counter limit={10} />
  </Field>
);

render(<Counter />)

Plassering

Når du bruker Field sammen med valgkomponenter som Switch, kan du plassere etiketten enten før eller etter kontrollen. Dette gjør det mulig å tilpasse komponenten til sammenhengen.

const Position = () => (
  <>
    <Field position='end'>
      <Label>Flymodus</Label>
      <Input type='checkbox' role='switch' />
    </Field>
  </>
);

render(<Position />)

Retningslinjer

Field hjelper deg med å strukturere skjemafelt på en tilgjengelig og konsistent måte. Den kobler automatisk sammen Label, Field.Description, ValidationMessage og Field.Counter med det tilhørende feltet via riktige ARIA-attributter.