TextInput component supports Input and Input.Wrapper components features and all
input element props.
TextInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.
rightSection props. These sections are rendered with absolute position inside the input wrapper. You can use them to display icons, input controls or any other elements.
You can use the following props to control sections styles and content:
leftSection– React node to render on the corresponding side of input
leftSectionWidth– controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component
pointer-eventsproperty of the section. If you want to render a non-interactive element, set it to
noneto pass clicks through to the input.
Component Styles API
Hover over selectors to highlight corresponding elements
TextInput is used without
label prop, it will not be announced properly by screen reader:
aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:
label prop is set, input will be accessible it is not required to set