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

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.