Field

Det er vanlig å bli forvirret mellom Fieldset og Field. En god huskeregel er at Fieldset er et sett med 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 kan brukes sammen med Input, Textarea og Select. OBS: Textfield har allerede Field innebygd, og kan derfor ikke brukes i en Field.

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

Bruk position="end" når du ønsker å plassere for eksempel en Switch til høyre for Label.

Du kan endre teksten ved å sende inn props, som du kan se øverst på siden. Språket er standard norsk bokmål.

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

render(<Position />)

HTML

Du kan få styling fra Field med klassenavnet ds-field. På beskrivelse må du sette data-field="description" for å få korrekt styling.

Diverre er det ein del javascript som Field køyrer internt, så dette må koblest opp selv. Koden vi bruker er ikke react-spesifikk, så du kan kopiere koden vår inntil vi har et bedre alternativ utenfor React.

fieldObserver (github.com)

Pass på at skjemafeltet har aria-describedby som refererer til både beskrivelse og valideringsmelding.. Error skal ligge først i aria-describedby slik at skjermlesere leser opp feilmeldingen først.

data-field="validation" trengst kun dersom du kobler opp fieldObserver.

Plassering

For å endre plassering av elementer i Field, som for eksempel en Switch, kan du legge til data-position="end|start" på samme element som ds-field.

CSS variabler og data-attributter