Gravity UI – UIKit

import {TextInput} from '@gravity-ui/uikit';

TextInput permite a los usuarios introducir texto en una interfaz de usuario.

Apariencia

La apariencia de TextInput está controlada por las pin propiedades view y.

Ver

normal- la vista principal de TextInput (utilizada de forma predeterminada).

<TextInput placeholder="Placeholder" />

clear- se puede usar con un envoltorio personalizado para. TextInput

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

Alfiler

Le permite controlar la vista de los bordes derecho e izquierdo TextInputdel borde.

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

Estados

Discapacitado

El estado en el TextInput que no desea que el usuario pueda interactuar con el componente.

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

Error

El estado TextInput en el que desea indicar una entrada de usuario incorrecta. Para cambiar el TextInput aspecto, utilice la validationState propiedad con el "invalid" valor. Se puede agregar un texto de mensaje opcional a través de la errorMessage propiedad. De forma predeterminada, el texto del mensaje se representa fuera del componente. Este comportamiento se puede cambiar con la errorPlacement propiedad.

Error message

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

Tamaño

s— Se usa cuando los controles estándar son demasiado grandes (mesas, cartas pequeñas).

m— Tamaño básico, utilizado en la mayoría de los componentes.

l— Controles básicos realizados en el encabezado, las ventanas modales o las ventanas emergentes de una página.

xl— Se utiliza en las páginas promocionales y de destino.

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

Etiqueta

Le permite establecer la etiqueta a la izquierda del control.

la etiqueta ocupa la posición más a la izquierda en relación con el control. Es decir, los elementos agregados a través de la startContent propiedad se ubicarán a la derecha.
La etiqueta no puede ocupar más de la mitad del ancho de todo el espacio de TextInput.

LabelVery long label with huge amount of symbols

<TextInput placeholder="Placeholder" label="Label" />
<TextInput placeholder="Placeholder" label="Very long label with huge amount of symbols" />

Contenido adicional

Iniciar contenido

Le permite agregar contenido a la izquierda del control (o a la derecha en caso de usar rtl). Ubicado a la izquierda (o a la derecha en caso de usar rtl) de la etiqueta agregada mediante la label propiedad.

Left

Label

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

Contenido final

Le permite agregar contenido a la derecha (o a la izquierda en caso de usar rtl) del control. Ubicado a la derecha (o a la izquierda en caso de usar rtl) del botón de borrar agregado mediante la hasClear propiedad.

Right

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

Propiedades

Nombre	Descripción	Tipo	Predeterminado
autoComplete	El `autocomplete` atributo del control	`boolean` `string`
autoFocus	El `autofocus` atributo del control	`boolean`
className	El nombre de la clase contenedora del control	`string`
controlProps	Los atributos html del control	`Atributos HTML de React.Input<HTMLInputElement>`
controlRef	React ref proporcionada al control	`Reactar.Ref<HTMLInputElement>`
defaultValue	El valor predeterminado del control, que se usa cuando el componente no está controlado	`string`
inhabilitado	Indica que el usuario no puede interactuar con el control	`React.ReactNode`
endContent	Nodo del usuario`renderizado después del nodo de entrada, botón de borrar e icono de error	`string`
errorMessage	Texto de error	`string`
errorPlacement	Colocación del error	`outside` `inside`	`outside`
hasClear	Muestra el icono para borrar el valor del control	`boolean`	`false`
identificación	El `id` atributo del control	`string`
etiqueta	Texto de ayuda representado a la izquierda del nodo de entrada	`string`
nombre	El `name` atributo del control. Si no se especifica, se generará automáticamente si no se especifica	`string`
nota	Un elemento opcional que se muestra en la esquina inferior derecha del control y que comparte un espacio con el contenedor de errores	`React.ReactNode`
onBlur	Se dispara cuando el control pierde el foco. Proporciona un evento de enfoque como argumento de devolución de llamada	`function`
onChange	Se activa cuando el usuario cambia el valor de la entrada. Proporciona un evento de cambio como argumento de devolución de llamada	`function`
onFocus	Se dispara cuando el control se enfoca. Proporciona un evento de enfoque como argumento de devolución de llamada	`function`
onKeyDown	Se dispara cuando se pulsa una tecla. Proporciona un evento de teclado como argumento de devolución de llamada	`function`
onKeyUp	Se dispara cuando se suelta una tecla. Proporciona un evento de teclado como argumento de devolución de llamada	`function`
onUpdate	Se activa cuando el usuario cambia el valor de la entrada. Proporciona un nuevo valor como argumento de devolución de llamada	`function`
alfiler	La vista fronteriza del control	`string`	`'round-round'`
marcador de posición	Texto que aparece en el control cuando no tiene ningún valor establecido	`string`
qa	Atributo de ID de prueba (`data-qa`)	`string`
readOnly	Indica que el usuario no puede cambiar el valor del control	`boolean`	`false`
tamaño	El tamaño del control	`"s"` `"xl"`	`"m"`
startContent	El nodo del usuario`se representa antes de la etiqueta y el nodo de entrada	`React.ReactNode`
tabIndex	El `tabindex` atributo del control	`string`
tipo	El tipo de control	`"email"` `"url"`
validationState	Estado de validación	`"invalid"`
valor	El valor del control	`string`
vista	La vista del control	`"normal"` `"clear"`	`"normal"`

API CSS

Nombre	Descripción
`--g-text-input-text-color`	Color del texto
`--g-text-input-label-color`	Color de etiqueta
`--g-text-input-placeholder-color`	Color del marcador de posición
`--g-text-input-background-color`	Color de fondo
`--g-text-input-border-radius`	Radio de borde
`--g-text-input-border-width`	Ancho del borde
`--g-text-input-border-color`	Color del borde
`--g-text-input-border-color-hover`	Color del borde si pasa el ratón por encima
`--g-text-input-border-color-active`	Color del borde si está activo
`--g-text-input-focus-outline-color`	Color del contorno si está enfocado (de forma predeterminada, no se presenta)

TextInput

§Apariencia

§Ver

§Alfiler

§Estados

§Discapacitado

§Error

§Tamaño

§Etiqueta

§Contenido adicional

§Iniciar contenido

§Contenido final

§Propiedades

§API CSS