TextInput

TextInput is a form component to add default styling to the native text input. Don't forget to set aria-label to make the TextInput accessible to screen reader users.

Default example

<TextInput aria-label="Zipcode" name="zipcode" />

System props

TextInput components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
autocompleteStringAllows user to set autocomplete attribute on input. See MDN docs for attribute documentation.
aria-labelStringLabel that describes the input for screen reader users
blockBooleanAdds display: block to element
disabledBooleanSets the disabled attribute on the element
idStringSets the id attribute on the element
nameStringSets the name attribute on the element
onChangeFunctionFunction to be called when content in Input changes
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.
Edit this page on GitHub