TextInput

TextInput is a form component to add default styling to the native text input element.

Pro tip: Don't forget to set aria-label to make the TextInput accessible to screen reader users.

Default example

<TextInput name="zipcode" type="text" placeholder="Standard input" aria-label="Zipcode" value="fizz" />

Different sizes

<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <TextInput my={1} size='small' name="zipcode" type="text" placeholder="Small input" aria-label="Zipcode" value="fizz" />
    <TextInput my={1} size='large' name="zipcode" type="text" placeholder="Large input" aria-label="Zipcode" value="fizz" />
</Flex>

Mono font-family

<TextInput monospace name="zipcode" type="text" placeholder="Monospace input" aria-label="Zipcode" value="fizz" />

Contrast

<TextInput contrast name="zipcode" type="text" placeholder="Contrast input" aria-label="Zipcode" value="fizz" />

Block (full-width)

<TextInput block name="zipcode" type="text" placeholder="Block input" aria-label="Zipcode" value="fizz" />

System props

TextInput components get BACKGROUND BORDER, COMMON and TYPOGRAPHY system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
typeStringOne of various, valid form input element types, e.g. text, tel, password, email, etc.
autocompleteStringAllows user to set autocomplete attribute on input. See MDN docs for attribute documentation.
aria-labelStringLabel that describes the input for screen reader users. Learn more about aria-* properties.
blockBooleanSets the input field to full-width, relative to the parent container
contrastBooleanAdds bg- and fore-ground contrast to the input field and text
disabledBooleanSets the disabled attribute on the element
idStringSets the id attribute on the element
monospaceBooleanSet the input field's font-family to monospace as defined in the theme
nameStringSets the name attribute on the element
noBorderBooleanRemoves the default border creating a borderless input field
noBoxShadowBooleanRemoves the default box-shadow
onChangeFunctionFunction to be called when content in Input changes
patternRegExpA regular expression the entered value must match to pass constraint validation
placeholderStringSets the placeholder text
requiredBooleanSets the required attribute on the element
sizeStringCan be either small or large. Creates a smaller or larger input than the default.
valueStringCurrent value of the Input.