Field

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

Unable to parse html

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.

Unable to parse html

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.

Unable to parse html

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.

Unable to parse html

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

render(<PositionEn />)

HTML

Add the class name ds-field to the <ds-field> element. <ds-field> links together label, input and validation message.

Number of characters

To get a counter on input and textarea, add a <p> with the attribute data-field="counter" inside the ds-field.

You can control the text in the counter using the following attributes:

Indeterminate

To make a checkbox indeterminate, add data-indeterminate="true" on the <input> element.

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