Input

Form input component

import { Input } from 'theme-ui'

<Input defaultValue="Hello" />
<Input defaultValue="Hello" />

Variants

Input variants can be defined in theme.forms and the component uses the theme.forms.input variant by default.

Autocomplete styles

Background color of autofilled inputs defaults to background, and can be changed by setting autofillBackgroundColor prop.

<Input autoComplete="given-name" autofillBackgroundColor="highlight" />
<Input autoComplete="given-name" autofillBackgroundColor="highlight" />