Input

Usage

<Input />

Outline

<Input outline />

Sizes

El uso principal de los tamaños de input es hacer que los inputs se vean más grandes o más pequeños que su tamaño predeterminado. Esto se puede lograr aplicando la prop size a un input. Los tamaños disponibles son: xs, sm, md, lg y xl.

<Input size='xs' placeholder="Extra small" />
<Input size='sm' placeholder="Small" />
<Input size='md' placeholder="Medium" />
<Input size='lg' placeholder="Large" />
<Input size='xl' placeholder="Extra large" />

Disabled

Los inputs deshabilitados se muestran con un color de fondo gris claro. Su principal propósito es evitar que los usuarios envíen datos que no se pueden usar, por ejemplo, cuando se requiere un valor para un campo de entrada, pero no se puede proporcionar.

<Input disabled placeholder="Disabled input" />

Readonly

Este input es de solo lectura. El usuario no puede modificar el valor del input, pero sí puede seleccionar su contenido y copiarlo.

<Input readonly value="This is a readonly input" />

State

Valid state

En este estado, el input se muestra con un borde verde y un icono de verificación. Este estado se usa para indicar que el input es válido.

<Input state='valid' placeholder="Valid input" value="This is a valid input" />

Invalid state

En este estado, el input se muestra con un borde rojo y un icono de error. Este estado se usa para indicar que el input es inválido.

<Input state='invalid' placeholder="Invalid input" value="This is an invalid input" />

With sizes

<!-- Size -->
<Input size='xs' state='valid' placeholder="Extra small" />

<!-- Size -->
<Input size='xs' state='invalid' placeholder="Extra small" />

Prepend and append

<div class="astroui-prepend">
  <Input placeholder="Prepend" />
  <svg class="astroui-addonz" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</div>

<!-- Outline -->
<div class="astroui-prepend">
  <Input outline placeholder="Prepend" />
  <svg class="astroui-addonz" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</div>

<div class="astroui-append">
  <Input placeholder="Append" />
  <svg class="astroui-addonz" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</div>

<!-- Outline -->
<div class="astroui-append">
  <Input outline placeholder="Append" />
  <svg class="astroui-addonz" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</div>

Examples

<form class="flex items-center gap-4 max-w-md">
  <Input placeholder="Search" />
  <Button variant='primary'>Search</Button>
</form>

<form class="flex items-center gap-4 max-w-md">
  <Input outline placeholder="Search" />
  <Button variant='secondary'>Search</Button>
</form>

<form class="max-w-xs mx-auto space-y-4">
  <div class="space-y-2">
    <label for="user" class="block font-medium text-gray-700">Email</label>
    <Input id="user" name="user" placeholder="Usuario" />
  </div>
  <div class="space-y-2">
    <label for="password" class="block font-medium text-gray-700">Password</label>
    <Input id="password" name="password" type="password" placeholder="Password" />
  </div>
  <div>
    <Button class="w-full" variant='primary'>Enter your account</Button>
  </div>
</form>

<form class="max-w-xs mx-auto space-y-4">
  <div class="space-y-2">
    <label for="user" class="block font-medium text-gray-700">Email</label>
    <Input id="user" name="user" placeholder="Usuario" />
  </div>
  <div class="space-y-2">
    <label for="password" class="block font-medium text-gray-700">Password</label>
    <Input state='invalid' id="password" name="password" type="password" placeholder="Password"/>
  </div>
  <div>
    <Button class="w-full" variant='primary'>Enter your account</Button>
  </div>
  <Alert type="error">
    <p>Your password is incorrect.</p>
  </Alert>
</form>