Input

Input es un campo de texto de una línea. Un input real e invisible es dueño de la edición, el foco, el IME, el clipboard y la accesibilidad, y el canvas dibuja el vidrio, el texto, el caret y la selección.

Un campo de texto real, dibujado en el canvas.

Uso

<script lang="ts">
  import { Input } from 'essentia-ui'

  let email = $state('')
</script>

<Input
  bind:value={email}
  label="Email"
  type="email"
  placeholder="email@ejemplo.com"
  width={320}
  onsubmit={(value) => send(value)}
/>

label es obligatorio: es el nombre accesible del campo.

Costo

Sin foco, 0 renders en reposo. Con foco, el parpadeo del caret redibuja la escena unas dos veces por segundo, y caretBlink={false} lo apaga. Necesita EssentiaRoot.

Referencia de props

Prop	Tipo	Default	Descripción
`value`	`string`	`''`	Valor del campo. Con bind:value, la fuente de verdad del consumidor.
`label`	`string`	`requerido`	Nombre accesible del campo (aria-label del ghost). Obligatorio: sin él el control no tiene nombre.
`placeholder`	`string`	`''`	Texto que se dibuja con el campo vacío.
`type`	`InputType`	`'text'`	Tipo del campo: define el teclado virtual y el autofill. password enmascara el texto. email usa un ghost text con inputmode="email": el <input type="email"> no expone la selección.
`name`	`string`	`—`	name del ghost (autofill y gestores de contraseñas).
`autocomplete`	`HTMLInputAttributes['autocomplete']`	`'off'`	autocomplete del ghost.
`inputmode`	`HTMLInputAttributes['inputmode']`	`—`	inputmode del ghost: qué teclado virtual se abre.
`enterkeyhint`	`HTMLInputAttributes['enterkeyhint']`	`—`	enterkeyhint del ghost: la etiqueta de Enter en el teclado virtual.
`autocapitalize`	`HTMLInputAttributes['autocapitalize']`	`—`	autocapitalize del ghost (teclados virtuales).
`maxlength`	`number`	`—`	Largo máximo en unidades UTF-16 (maxlength del ghost).
`required`	`boolean`	`false`	required del ghost (lo anuncia el lector de pantalla).
`disabled`	`boolean`	`false`	Sin foco ni edición; texto y vidrio atenuados.
`readonly`	`boolean`	`false`	Enfocable y seleccionable, pero no editable (sin caret).
`invalid`	`boolean`	`false`	Valor inválido: aria-invalid en el ghost y tinte de error en el vidrio.
`tabindex`	`number`	`—`	Posición en el orden de Tab (tabindex del ghost). Por defecto, el orden de montaje.
`width`	`number`	`320`	Ancho en píxeles CSS.
`height`	`number`	`48`	Alto en píxeles CSS.
`radius`	`number`	`height / 2`	Radio de esquinas en píxeles CSS.
`fontSize`	`number`	`17`	Tamaño de fuente en píxeles CSS.
`font`	`string`	`typography.font del tema (sin ella, la fuente latina por defecto de troika)`	URL de la fuente del texto (.ttf, .otf, .woff), como <Text font>. El ghost carga la misma, para que el caret nativo (y la ventana del IME) caiga sobre el dibujado.
`preset`	`GlassPresetName`	`el material field del tema (preset 'frosted' con blur 16)`	Preset del <Glass> de fondo. Reemplaza entero al material field del tema: no se mezcla con sus overrides.
`caretBlink`	`boolean`	`true`	Parpadeo del caret con foco. Cada cambio de fase es un frame completo (aprox. 2 renders/s mientras el campo tiene foco). Con prefers-reduced-motion el caret queda fijo.
`x`	`number`	`0`	Posición X del centro.
`y`	`number`	`0`	Posición Y del centro.
`z`	`number`	`0`	Z del vidrio (texto, caret y selección van apenas delante).
`oninput`	`HTMLInputAttributes['oninput']`	`—`	input nativo del ghost (después de actualizar value).
`onchange`	`HTMLInputAttributes['onchange']`	`—`	change nativo del ghost (al confirmar el valor: blur o Enter).
`onfocus`	`HTMLInputAttributes['onfocus']`	`—`	focus nativo del ghost.
`onblur`	`HTMLInputAttributes['onblur']`	`—`	blur nativo del ghost.
`onkeydown`	`HTMLInputAttributes['onkeydown']`	`—`	keydown nativo del ghost. Un preventDefault() evita onsubmit.
`onsubmit`	`(value: string) => void`	`—`	Enter fuera de una composición IME, con el valor actual.

Anterior: Card

Siguiente: Flex, Box y Align