Field

Det er vanlig å bli forvirret mellom Fieldset og Field. En god huskeregel er at Fieldset er et sett med 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 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.

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

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

Unable to parse html

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.

Unable to parse html

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

render(<Position />)

HTML

Legg klassenavnet ds-field på <ds-field> elementet. <ds-field> kobler sammen label, input, valideringsmelding og counter.

Antall tegn

For å få en teller på input og textarea, legg til en <p> med attributtet data-field="counter" inne i ds-field.

Du kan styre teksten i telleren ved å bruke følgende attributter:

Ubestemt

For å sette en checkbox til ubestemt, legg til data-indeterminate="true" på <input> elementet.

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