Input

Un campo de texto con label integrado, manejo de errores, slots de íconos y variantes de tamaño.

default.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function Default() {
6  return <Input placeholder="Enter your email" />;
7}

Instalación

pnpm dlx nachui add input

Anatomía

1import { Input } from '@/components/ui/input';

1<Input label="Email" placeholder="tu@ejemplo.com" />

Variantes

Predeterminado (Default)

default.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function Default() {
6  return <Input placeholder="Enter your email" />;
7}

Con Label

Input con label integrado usando la prop label.

with-label.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function WithLabel() {
6  return <Input label="Email" placeholder="you@example.com" type="email" />;
7}

Con Error

Estado de error de validación con mensajes accesibles.

Please enter a valid email address

with-error.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function WithError() {
6  return (
7    <Input
8      label="Email"
9      placeholder="you@example.com"
10      type="email"
11      error="Please enter a valid email address"
12      defaultValue="invalid-email"
13    />
14  );
15}

Con Íconos

Input con slots de íconos a la izquierda y/o derecha.

Password

with-icon.tsx

1'use client';
2
3import { Search01Icon, ViewIcon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Input } from '@/components/ui/input';
6
7export function WithIcon() {
8  return (
9    <div className="flex flex-col gap-4">
10      <Input placeholder="Search..." leftIcon={<HugeiconsIcon icon={Search01Icon} size={16} />} />
11      <Input
12        label="Password"
13        type="password"
14        placeholder="Enter password"
15        rightIcon={<HugeiconsIcon icon={ViewIcon} size={16} />}
16      />
17    </div>
18  );
19}

Tamaños

Tres variantes de tamaño: sm, default y lg.

sizes.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function Sizes() {
6  return (
7    <div className="flex flex-col gap-4">
8      <Input size="sm" placeholder="Small input" />
9      <Input size="default" placeholder="Default input" />
10      <Input size="lg" placeholder="Large input" />
11    </div>
12  );
13}

Deshabilitado (Disabled)

Un estado deshabilitado previene toda interacción.

disabled.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function Disabled() {
6  return <Input label="Email" placeholder="you@example.com" disabled />;
7}

Componentes Compuestos

El Input también expone sub-componentes para layouts personalizados:

1<Input.Wrapper>
2  <Input.Label htmlFor="custom">Layout personalizado</Input.Label>
3  <Input.Description>Texto de ayuda va aquí.</Input.Description>
4  <input id="custom" />
5  <Input.Error>Algo salió mal.</Input.Error>
6</Input.Wrapper>

Referencia de API

Input

Prop	Tipo	Por defecto	Descripción
`label`	`string`	—	Texto del label renderizado arriba del input.
`error`	`string`	—	Mensaje de error mostrado debajo del input.
`description`	`string`	—	Texto de ayuda mostrado entre el label y el input.
`size`	`"sm"` \| `"default"` \| `"lg"`	`"default"`	El tamaño del campo de entrada.
`leftIcon`	`React.ReactNode`	—	Ícono mostrado a la izquierda del input.
`rightIcon`	`React.ReactNode`	—	Ícono mostrado a la derecha del input.
`disabled`	`boolean`	—	Deshabilita el input.
`className`	`string`	—	Clases CSS adicionales.
`type`	`string`	`"text"`	El tipo del elemento input.

Input.Wrapper

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Clases CSS adicionales.
`children`	`React.ReactNode`	—	El contenido.

Input.Label

Prop	Tipo	Por defecto	Descripción
`htmlFor`	`string`	—	Asocia con un elemento input.
`className`	`string`	—	Clases CSS adicionales.

Input.Description

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Clases CSS adicionales.
`children`	`React.ReactNode`	—	El texto de la descripción.

Input.Error

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Clases CSS adicionales.
`children`	`React.ReactNode`	—	El mensaje de error.

AnteriorFiles SiguienteKbd