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

Det er vanlig å bli forvirret mellom fieldset og field. En god huskeregel er at fieldset er et sett med field.

Field kan brukes sammen med input, textarea og select. OBS: textfield har allerede field innebygd og kan derfor ikke brukes inni en field.

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

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.

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

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

Unable to parse html

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

render(<Counter />)

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

Plassering

Bruk data-position="end" på <ds-field> når du for eksempel ønsker å plassere en switch til høyre for label. Standard er data-position="start".

Unable to parse html

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

render(<Position />)

Ubestemt

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

CSS variabler og data-attributter

Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.

React