Input

Overview

Inputs are form controls that allow entering numeric or text data, often supported by system validation.

When to use:

  • Use text inputs to let the user input short lines of text or numbers.
  • Most of the time used within Forms.

Implementation

Inputs are stylized form controls with the ability of controling validation.

Edit the code below to see your changes live!

function Example() {
  const [value, setValue] = useState('');

  const handleChange: InputProps['onChange'] = (event) =>
    setValue(event.target.value);

  return (
    <Form>
      <FormGroup>
        <Input
          description="Description for the input."
          label="Label"
          onChange={handleChange}
          placeholder="Placeholder"
          type="text"
          value={value}
        />
      </FormGroup>
    </Form>
  );
}

Props

Supports all native <input /> element attributes.

Prop name
Type
Default
Description
descriptionstring | FormControlDescription

Append a description to the input field.

errorstring | string[] | FormControlError | FormControlError[]

Displays an error message for the field. Error message will be passed to the FormGroup for display purposes.

iconLeftIcon

Pass in an Icon component to display to the left of the text.

iconRightIcon

Pass in an Icon component to display to the right of the text.

labelstring | FormControlLabel

Label element for inputs. Component with auto generate id's for the accessibility API.

labelIdstring

Appends an id to the generated label element.

Props ending with * are required

Do's and Don'ts

Do
Provide placeholder text, examples or formats of relevent content.
Provide inline error notification post input submission.
Use labels to help users understand what information to enter.
Size input containers to their expected content.
Don't
If the expected input is more than one sentence, use the Textarea component instead.
Avoid using long input labels that do not decribe the content needed.
Allow more than one line of text.