Field

It is common to get confused between Fieldset and Field. A good rule of thumb is that Fieldset is a set of Field

const PreviewEn = () => {
  return (
    <Field>
      <Label>Last name</Label>
      <Field.Description>Last name cannot contain spaces</Field.Description>
      <Input defaultValue='Smith Washington' />
      <ValidationMessage>
        You cannot have spaces in your last name
      </ValidationMessage>
    </Field>
  );
};

render(<PreviewEn />)

Usage

Field can be used with Input, Textarea and Select. NOTE: Textfield already has Field built in, and therefore cannot be used in a Field.

Examples

Prefix/Suffix

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

const AffixEn = () => (
  <Field>
    <Label>How many pounds does it cost per month?</Label>
    <Field.Affixes>
      <Field.Affix>GBP</Field.Affix>
      <Input />
      <Field.Affix>per month</Field.Affix>
    </Field.Affixes>
  </Field>
);

render(<AffixEn />)

Number of characters

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

const CounterEn = () => (
  <Field>
    <Label>Add a description</Label>
    <Textarea rows={2} />
    <Field.Counter limit={10} />
  </Field>
);

render(<CounterEn />)

Position

Use position="end" when you want to place, for example, a Switch to the right of Label.

You can change the text by submitting props, which you can see at the top of the page. The language is standard Norwegian Bokmål.

const PositionEn = () => (
  <>
    <Field position='end'>
      <Label>Airplane mode</Label>
      <Input type='checkbox' role='switch' />
    </Field>
  </>
);

render(<PositionEn />)

HTML

You can get styling from Field with the class name ds-field. On the description you must set data-field="description" to get correct styling.

Also, there is some javascript that Field runs internally, so this must be connected yourself.

The code we use is not react-specific, so you can copy our code until we have a better alternative outside of React.

fieldObserver (github.com)

Make sure the form field has aria-describedby which refers to both description and validation message.. Error should be placed first in aria-describedby so that screen readers read the error message first.

data-field="validation" is only needed if you connect fieldObserver.

Position

To change the position of elements in Field, such as a Switch, you can add data-position="end|start" to the same element as ds-field.

CSS variables and data attributes