Skip to content


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

System props are deprecated in all components except Box. Please use the sx prop instead.

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.

aria-labelStringRequired. Allows input to be accessible.
blockBooleanAdds display: block to element
contrastBooleanChanges background color to a higher contrast color
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
5 contributorsVanAndersonemplumsewgeniussmockleBinaryMuse
Last edited by VanAnderson on July 22, 2021