TextInput

Table of contents

Default example
System props
Component props

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

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

Default example

<TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />

<TextInput  ml={4} aria-label="City" name="city" placeholder="City" contrast />

<TextInput ml={4} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />

<TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />

<TextInput  ml={4} aria-label="City" name="city" placeholder="City" contrast />

<TextInput ml={4} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />

System props

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

Component props

Native <input> attributes are forwarded to the underlying React input component and are not listed below.

Name	Type	Description
aria-label	String	Required. Allows input to be accessible.
block	Boolean	Adds `display: block` to element
contrast	Boolean	Changes background color to a higher contrast color
variant	String	Can be either `small` or `large`. Creates a smaller or larger input than the default.
width	String or Number	Set the width of the input
maxWidth	String or Number or Array	Set the maximum width of the input
minWidth	String or Number or Array	Set the minimum width of the input
icon	Node (pass Octicon react component)	Icon to be used inside of input. Positioned on the left edge.

Edit this page on GitHub

4 contributors

Last edited by emplums on February 25, 2021