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" />
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 | Default | 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. |