FormInput

This form input component is a primitive component. It only renders a single styled html input element.

It can be used to create a fully featured form field that contains an input and other important things a form field needs like a label and error message.

<FormInput placeholder="Type here..." />

Fixed width inputs

By default the text input is "fluid"—meaning it will stretch to fill up the remaining width. Just like flex-grow: 1;.

As a best practice we encourage to size input fields according to their expected content width because that gives users an indication of what data in what format is expected.

For example a zip code input should only be 5 characters wide so that users immediately know that they must input their zip code without the city name.

<FormInput placeholder="ZIP" expectedLength={5} />

Error state

<Spacings.Stack>
  <FormInput placeholder="Default" />
  <FormInput placeholder="Error" invalid />
</Spacings.Stack>

Suffixes and prefixes

Some input fields might require a unit to make more sense like a money input field. In the case of a money field one could provide a € as the suffix using the FormInputGroup and FormInputAffix components.

<FormInputGroup>
  <FormInput placeholder="Revenue" />
  <FormInputAffix>€</FormInputAffix>
</FormInputGroup>

Custom Styling

In case you need to adapt the looks of this component you can either just pass a class name of use styled components extension like so:

const CustomFormInput = styled(FormInput)`
  border-top: 0;
  border-right: 0;
  border-left: 0;
`

Props