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

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

Field can be used with input, textarea and select. NOTE: textfield already has field built in, and therefore cannot be used inside a field.

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

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