TextInput

view
size
placeholder
label
note
validationState
errorMessage
errorPlacement
disabled
hasClear
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).

<TextInput placeholder="Placeholder" />

clear - can be used with a custom wrapper for TextInput.

<TextInput view="clear" placeholder="Placeholder" />

Pin

Allows you to control view of right and left edges of TextInput's border.

<TextInput placeholder="Placeholder" pin="round-brick" />
<TextInput placeholder="Placeholder" pin="brick-brick" />
<TextInput placeholder="Placeholder" pin="brick-round" />

States

Disabled

The state of the TextInput where you don't want the user to be able to interact with the component.

<TextInput placeholder="Placeholder" disabled={true} />

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.

Error message
<TextInput placeholder="Placeholder" errorMessage="Error message" validationState="invalid" />
<TextInput placeholder="Placeholder" errorPlacement="inside" errorMessage="Error message" validationState="invalid" />

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.

<TextInput placeholder="Placeholder" size="s" />
<TextInput placeholder="Placeholder" size="m" />
<TextInput placeholder="Placeholder" size="l" />
<TextInput placeholder="Placeholder" size="xl" />

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.
<TextInput placeholder="Placeholder" label="Label" />
<TextInput placeholder="Placeholder" label="Very long label with huge amount of symbols" />

Additional content

Start content

Allows you to add content to the left of the control (or to the right in case of using rtl). Located to the left (or to the right in case of using rtl) of the label added via label property.

Left
<TextInput placeholder="Placeholder" label="Label" startContent={<Label size="s">Left</Label>} />

End content

Allows you to add content to the right (or to the left in case of using 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.

Right
<TextInput placeholder="Placeholder" endContent={<Label size="s">Right</Label>} hasClear/>

Properties

NameDescriptionTypeDefault
autoCompleteThe control's autocomplete attributeboolean string
autoFocusThe control's autofocus attributeboolean
classNameThe control's wrapper class namestring
controlPropsThe control's html attributesReact.InputHTMLAttributes<HTMLInputElement>
controlRefReact ref provided to the controlReact.Ref<HTMLInputElement>
defaultValueThe control's default value, used when the component is not controlledstring
disabledIndicates that the user cannot interact with the controlReact.ReactNode
endContentUser`s node rendered after input node, clear button and error iconstring
errorMessageError textstring
errorPlacementError placementoutside insideoutside
hasClearShows the icon for clearing control's valuebooleanfalse
idThe control's id attributestring
labelHelp text rendered to the left of the input nodestring
nameThe name attribute of the control. If unspecified, it will be autogenerated if not specifiedstring
noteAn optional element displayed under the bottom-right corner of the control that shares a space with the error containerReact.ReactNode
onBlurFires when the control lost focus. Provides focus event as a callback's argumentfunction
onChangeFires when the input’s value is changed by the user. Provides change event as an callback's argumentfunction
onFocusFires when the control gets focus. Provides focus event as a callback's argumentfunction
onKeyDownFires when a key is pressed. Provides keyboard event as a callback's argumentfunction
onKeyUpFires when a key is released. Provides keyboard event as a callback's argumentfunction
onUpdateFires when the input’s value is changed by the user. Provides new value as an callback's argumentfunction
pinThe control's border viewstring'round-round'
placeholderText that appears in the control when it has no value setstring
qaTest ID attribute (data-qa)string
readOnlyIndicates that the user cannot change control's valuebooleanfalse
sizeThe size of the control"s" "m" "l" "xl""m"
startContentUser`s node rendered before label and input nodeReact.ReactNode
tabIndexThe tabindex attribute of the controlstring
typeThe type of the control"email" "number" "password" "search" "tel" "text" "url"
validationStateValidation state"invalid"
valueThe value of the controlstring
viewThe view of the control"normal" "clear""normal"

CSS API

NameDescription
--g-text-input-text-colorText color
--g-text-input-label-colorLabel color
--g-text-input-placeholder-colorPlaceholder color
--g-text-input-background-colorBackground color
--g-text-input-border-radiusBorder radius
--g-text-input-border-widthBorder width
--g-text-input-border-colorBorder color
--g-text-input-border-color-hoverBorder color if hovered
--g-text-input-border-color-activeBorder color if active
--g-text-input-focus-outline-colorOutline color if focused (by default not presented)