# TextInput ```tsx import {TextInput} from '@gravity-ui/uikit'; ``` TextInput allow users to enter text into a UI. ## Appearance The appearance of `TextInput` is controlled by the `view` and `pin` properties. ### View `normal` - the main view of `TextInput` (used by default). `clear` - can be used with a custom wrapper for `TextInput`. ```tsx ``` ### Pin Allows you to control view of right and left edges of `TextInput`'s border. ```tsx ``` ## States ### Disabled The state of the `TextInput` where you don't want the user to be able to interact with the component. ```tsx ``` ### Error The state of the `TextInput` in which you want to indicate incorrect user input. To change `TextInput` appearance, use the `validationState` property with the `"invalid"` value. An optional message text can be added via the `errorMessage` property. By default, message text is rendered outside the component. This behaviour can be changed with the `errorPlacement` property. ```tsx ``` ## Size `s` – Used when standard controls are too big (tables, small cards). `m` – Basic size, used in most components. `l` – Basic controls performed in a page's header, modal windows, or pop-ups. `xl` – Used on promo and landing pages. ```tsx ``` ## Label Allows you to set the label to the left of control. - label occupies the leftmost position relative to the control. That is, the elements added via `startContent` property will be located to the right. - label can take up no more than half the width of the entire TextInput's space. ```tsx ``` ## Additional content ### Start content Allows you to add content to the left of the control (or to the right in case of using [rtl](https://developer.mozilla.org/en-US/docs/Glossary/RTL)). Located to the left (or to the right in case of using rtl) of the label added via `label` property. ```tsx Left} /> ``` ### End content Allows you to add content to the right (or to the left in case of using [rtl](https://developer.mozilla.org/en-US/docs/Glossary/RTL)) of the control. Located to the right (or to the left in case of using rtl) of the clear button added via `hasClear` property. ```tsx Right} /> ``` ## Properties | Name | Description | Type | Default | | :-------------- | :---------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------: | :-------------: | | autoComplete | The control's `autocomplete` attribute | `boolean` `string` | | | autoFocus | The control's `autofocus` attribute | `boolean` | | | className | The control's wrapper class name | `string` | | | controlProps | The control's html attributes | `React.InputHTMLAttributes` | | | controlRef | React ref provided to the control | `React.Ref` | | | defaultValue | The control's default value, used when the component is not controlled | `string` | | | disabled | Indicates that the user cannot interact with the control | `React.ReactNode` | | | endContent | User`s node rendered after input node, clear button and error icon | `string` | | | errorMessage | Error text | `string` | | | errorPlacement | Error placement | `outside` `inside` | `outside` | | hasClear | Shows the icon for clearing control's value | `boolean` | `false` | | id | The control's `id` attribute | `string` | | | label | Help text rendered to the left of the input node | `string` | | | name | The `name` attribute of the control. If unspecified, it will be autogenerated if not specified | `string` | | | note | An optional element displayed under the bottom-right corner of the control that shares a space with the error container | `React.ReactNode` | | | onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `function` | | | onChange | Fires when the input’s value is changed by the user. Provides change event as an callback's argument | `function` | | | onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `function` | | | onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `function` | | | onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `function` | | | onUpdate | Fires when the input’s value is changed by the user. Provides new value as an callback's argument | `function` | | | pin | The control's border view | `string` | `'round-round'` | | placeholder | Text that appears in the control when it has no value set | `string` | | | qa | Test ID attribute (`data-qa`) | `string` | | readOnly | Indicates that the user cannot change control's value | `boolean` | `false` | | size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` | | startContent | User`s node rendered before label and input node | `React.ReactNode` | | | tabIndex | The `tabindex` attribute of the control | `string` | | | type | The type of the control | `"email"` `"number"` `"password"` `"search"` `"tel"` `"text"` `"url"` | | | validationState | Validation state | `"invalid"` | | | value | The value of the control | `string` | | | view | The view of the control | `"normal"` `"clear"` | `"normal"` | ## CSS API | Name | Description | | :----------------------------------- | :-------------------------------------------------- | | `--g-text-input-text-color` | Text color | | `--g-text-input-label-color` | Label color | | `--g-text-input-placeholder-color` | Placeholder color | | `--g-text-input-background-color` | Background color | | `--g-text-input-border-radius` | Border radius | | `--g-text-input-border-width` | Border width | | `--g-text-input-border-color` | Border color | | `--g-text-input-border-color-hover` | Border color if hovered | | `--g-text-input-border-color-active` | Border color if active | | `--g-text-input-focus-outline-color` | Outline color if focused (by default not presented) |