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 groups a label, an optional description, a form element (such as input, textarea, or select), and a validation message.

Add the class name ds-field to the <ds-field> element. <ds-field> automatically adds accessibility attributes and support for optional character count. <ds-field> also links the validation message across fields if it is placed inside a fieldset.

Note: The React component textfield already has field built-in and should therefore not be placed inside a field.

Examples

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.

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

Character count

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

Unable to parse html

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

render(<CounterEn />)

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

Placement

Use data-position="end" on <ds-field> when you want to place, for example, a switch to the right of the label. The default is data-position="start".

Unable to parse html

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

render(<PositionEn />)

Indeterminate

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

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent that has these set.

React