Input

Input de texto estilo terminal, con soporte para textarea, password y readonly.

Input

Demo

<Input v-model="text" placeholder="Escribe algo..." />

<Input v-model="password" type="password" placeholder="Contraseña" />

<Input v-model="multiline" :rows="3" />

Props

placeholder

Texto temporal dentro del input mientras está vacío.

<Input placeholder="Escribe algo..." />
<Input placeholder="ej: usuario@correo.com" />

color

Color de foco y borde activo del input.

<Input v-model="text" color="primary" placeholder="Primary" />
<Input v-model="text" color="success" placeholder="Success" />
<Input v-model="text" color="danger" placeholder="Danger" />

disabled

Deshabilita la interacción con el input.

<Input placeholder="Deshabilitado" disabled />

readonly

Input de solo lectura, visible pero no editable.

<Input v-model="text" readonly />

type

Tipo de input: text, password o number.

<Input v-model="text" type="text" placeholder="Texto" />
<Input v-model="password" type="password" placeholder="Contraseña" />

rows

Número de filas. Cuando es mayor a 1 se comporta como textarea.

<Input v-model="text" :rows="4" />

Events

Evento	Payload	Descripción
update:modelValue	string	Se emite al escribir en el input

API

Prop	Tipo	Default	Descripción
modelValue	string	''	Valor del input (v-model)
placeholder	string	''	Texto placeholder
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color de foco
disabled	boolean	false	Deshabilitado
readonly	boolean	false	Solo lectura
type	'text' \| 'password' \| 'number'	'text'	Tipo de input
rows	number	1	Número de filas (>1 = textarea)

Tokens usados

--font-mono, --bg, --border, --text, --color-*