TextInput
Capture string input from user
Import
Source
Docs
Package
Usage
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Controlled
Invalid state and error
Invalid email
Disabled state
With icon
With right section
Get input ref
Accessibility
Provide aria-label
in case you use component without label for screen reader support:
TextInput component props
Name | Type | Description |
---|---|---|
description | ReactNode | Input description, displayed after label |
descriptionProps | Record<string, any> | Props spread to description element |
disabled | boolean | Disabled input state |
error | ReactNode | Displays error message after input |
errorProps | Record<string, any> | Props spread to error element |
icon | ReactNode | Adds icon on the left side of input |
iconWidth | Width<string | number> | Width of icon section in px |
inputContainer | (children: ReactNode) => ReactNode | Input container component, defaults to React.Fragment |
inputWrapperOrder | ("input" | "label" | "error" | "description")[] | Controls order of the Input.Wrapper elements |
label | ReactNode | Input label, displayed before input |
labelProps | Record<string, any> | Props spread to label element |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Input border-radius from theme or number to set border-radius in px |
required | boolean | Sets required on input element |
rightSection | ReactNode | Right section of input, similar to icon but on the right |
rightSectionProps | Record<string, any> | Props spread to rightSection div element |
rightSectionWidth | Width<string | number> | Width of right section, is used to calculate input padding-right |
size | "xs" | "sm" | "md" | "lg" | "xl" | Input size |
type | HTMLInputTypeAttribute | Input element type |
variant | "unstyled" | "default" | "filled" | Defines input appearance, defaults to default in light color scheme and filled in dark |
withAsterisk | boolean | Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input |
wrapperProps | Record<string, any> | Props passed to root element (InputWrapper component) |
TextInput component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .mantine-TextInput-wrapper | Root Input element |
invalid | .mantine-TextInput-invalid | Invalid input modifier |
disabled | .mantine-TextInput-disabled | Invalid disabled modifier |
icon | .mantine-TextInput-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
withIcon | .mantine-TextInput-withIcon | Input element styles when used with icon, controlled by icon prop |
input | .mantine-TextInput-input | Main input element |
rightSection | .mantine-TextInput-rightSection | Input right section, controlled by rightSection prop |
root | .mantine-TextInput-root | Root element |
label | .mantine-TextInput-label | Label element styles, defined by label prop |
error | .mantine-TextInput-error | Error element styles, defined by error prop |
description | .mantine-TextInput-description | Description element styles, defined by description prop |
required | .mantine-TextInput-required | Required asterisk element styles, defined by required prop |