Input

Inputs are stylized form controls with the ability of controling validation. Text Field Design Guidelines.

Edit the code below to see your changes live!

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

  const handleChange = (event) => setValue(event.target.value);

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

function Example() {
  const [value, setValue] = useState('');
  const handleChange = (event) => setValue(event.target.value);
  return (
    <Form>
      <FormGroup>
        <Input
          label="Label"
          description="Description for the input."
          placeholder="Placeholder"
          type="text"
          value={value}
          onChange={handleChange}
        />
      </FormGroup>
    </Form>
  );
}

API

Supports all native <input /> element attributes.

Input

Prop Name	Type	Description
`description`	`string` \| `FormControlDescription`	Append a description to the input field.
`error`	`string` \| `string[]` \| `FormControlError` \| `FormControlError[]`	Displays an error message for the field. Error message will be passed to the `FormGroup` for display purposes.
`iconLeft`	`Icon`	Pass in an Icon component to display to the left of the text.
`iconRight`	`Icon`	Pass in an Icon component to display to the right of the text.
`label`	`string` \| `FormControlLabel`	Label element for inputs. Component with auto generate `id`'s for the accessibility API.
`labelId`	`string`	Appends an `id` to the generated label element.

Props ending with * are required

Error State

Inputs allow you to pass in an error message that will control the styles of an input. The logic on the input can be controlled with the onChange prop.

Edit the code below to see your changes live!

<Form>
  <FormGroup>
    <Input
      label="Email Address"
      description="Provide a valid email address."
      value="example@"
      error="Email address must contain a domain name."
      onChange={() => null}
    />
  </FormGroup>
</Form>

<Form>
  <FormGroup>
    <Input
      label="Email Address"
      description="Provide a valid email address."
      value="example@"
      error="Email address must contain a domain name."
      onChange={() => null}
    />
  </FormGroup>
</Form>

Icons

Inputs can also contain icons via the iconLeft & iconRight props.

Edit the code below to see your changes live!

<Form>
  <FormGroup>
    <Input label="Example" placeholder="Example" iconLeft={<CheckCircleIcon color="success" />} />
    <Input label="Example" placeholder="Example" iconRight={<CheckCircleIcon color="success" />} />
  </FormGroup>
</Form>

<Form>
  <FormGroup>
    <Input label="Example" placeholder="Example" iconLeft={<CheckCircleIcon color="success" />} />
    <Input label="Example" placeholder="Example" iconRight={<CheckCircleIcon color="success" />} />
  </FormGroup>
</Form>

Beta