Field

Unable to parse html

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, beskrivelse, valideringsmelding og antall tegn 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.

Unable to parse html

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

Vis hvor mange tegn brukerne har igjen å skrive.

Unable to parse html

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.

Unable to parse html

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, beskrivelse, valideringsmelding og antall tegn med det tilhørende feltet, slik at hjelpemiddelteknologi som skjermlesere leser dem som én enhet.