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 />)

Use Field when

• you need to ensure that Label, Field.Description, ValidationMessage and Field.Counter are correctly associated with a field

Avoid Field when

• you need to semantically group multiple fields; use Fieldset instead

Example

Prefix/Suffix

Prefixes and suffixes are useful for showing units, currency or other types of information relevant to the field. You should not use these on their own, as screen readers do not announce them. It is important that the same information shown in the prefix or suffix is also included in the label.

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 />)

Character count

Use Field.Counter to inform users about the number of characters they can enter in the field.

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

render(<Counter />)

Placement

When you use Field together with choice components such as Switch, you can place the label either before or after the control. This makes it easy to adapt the component to the context.

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

render(<Position />)

Guidelines

Field helps you structure form fields in an accessible and consistent way. It automatically links Label, Field.Description, ValidationMessage and Field.Counter to the relevant field using the correct ARIA attributes.