Input

const Preview = () => {
  return <Input aria-label='input' />;
};

render(<Preview />)

Use Input when

• you need a basic input field without additional functionality
• you are building custom fields or composite components
• you want to control your own logic for error handling and description

Avoid Input when

• you need a complete form field with label, description and validation message, use Textfield instead
• the field requires additional logic already provided by higher-level components such as Textfield

Example

This component is used as a building block for other components, such as Textfield. For that reason, Input will not have many examples or detailed guidance.

With label

const WithLabel = () => {
  return (
    <Field>
      <Label>Fødselsnummer</Label>
      <Input />
    </Field>
  );
};

render(<WithLabel />)

With error

const WithError = () => {
  return (
    <Field>
      <Label>Fødselsnummer</Label>
      <Input aria-invalid />
    </Field>
  );
};

render(<WithError />)

Disabled

Avoid using disabled where possible. Consider using readOnly instead.

const Disabled = () => {
  return (
    <Field>
      <Label>Fødselsnummer</Label>
      <Input disabled value='12345678901' />
    </Field>
  );
};

render(<Disabled />)

ReadOnly

const ReadOnly = () => {
  return (
    <Field>
      <Label>Fødselsnummer</Label>
      <Input readOnly value='12345678901' />
    </Field>
  );
};

render(<ReadOnly />)

Guidelines

See the guidelines for Textfield.

Placement of the label

The label and any description should always be placed above the text field. This makes them easier to see on small screens and prevents them from being hidden by validation messages.

In special cases, the label may be visually hidden by not using Label. This may be appropriate in tables, for example, when the field receives its label from the table header. Even when the label is visually hidden, it must still be written in a meaningful way, as it will be announced by screen readers. This can be done using aria-label or aria-labelledby.