Skip to content

TextInput

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

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.

NameTypeDefaultDescription
aria-labelStringRequired. Allows input to be accessible.
blockBooleanAdds display: block to element
variantStringCan be either small or large. Creates a smaller or larger input than the default.
widthString or NumberSet the width of the input
maxWidthString or Number or ArraySet the maximum width of the input
minWidthString or Number or ArraySet the minimum width of the input
iconNode (pass Octicon react component)Icon to be used inside of input. Positioned on the left edge.
Edit this page on GitHub
4 contributorsewgeniussmockleemplumsBinaryMuse
Last edited by ewgenius on May 11, 2020