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
iconNode (pass Octicon react component)Icon to be used inside of input. Positioned on the right edge.
Edit this page on GitHub
2 contributorsemplumsBinaryMuse
Last edited by emplums on January 3, 2020