componente · @solu30/ui-kit/input

TextInput

Campo de texto con etiqueta flotante, error, ayuda, íconos a los costados y tres tamaños.

367 sitios de import en 9 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
dietaly
elliot
gestorsalon
luigi
raquetea
zentrya

El componente, montado

Cargando el espécimen…

export function TextInputMatrix() {
  return (
    <Stage label="TextInput · tamaños, required/readonly/disabled y validación" tall wide>
      <div className="flex w-full flex-col gap-4">
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
          {TEXT_INPUT_SIZES.map((size) => (
            <TextInput
              key={size}
              size={size}
              label={`Tamaño ${size}`}
              placeholder="Nombre del evento"
              defaultValue={size === 'md' ? 'Boda de Julia y Nico' : undefined}
            />
          ))}
        </div>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <TextInput label="Cantidad de invitados" required placeholder="Ej: 120" suffix="pers." />
          <TextInput label="Código de reserva" defaultValue="EVT-2026-0148" readOnly />
          <TextInput label="Salón Jardín" defaultValue="Cerrado por refacción" disabled />
          <TextInput label="Depósito de garantía" prefix="US$" defaultValue="3500" />
        </div>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <TextInput
            label="Cantidad de invitados"
            defaultValue="220"
            error="El salón admite hasta 180 invitados"
          />
          <TextInput
            label="Cupo del catamarán"
            defaultValue="11"
            error="Quedan 2 lugares: confirmá antes de zarpar"
            errorType="warning"
          />
        </div>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · TextInputMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { TextInput } from '@solu30/ui-kit/input'

Props

13 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
label	opcional	`string`	Floating label text
error	opcional	`string`	Error message to display below input
errorType	opcional	`'warning' \| 'error'`	Type of error styling: 'error' (red) or 'warning' (yellow)
size	opcional	`InputSize`	Input size variant
icon	opcional	`React.ReactNode`	Icon displayed on the left (alias for startIcon)
startIcon	opcional	`React.ReactNode`	Icon displayed on the left
endIcon	opcional	`React.ReactNode`	Icon displayed on the right
prefix	opcional	`React.ReactNode`	Element rendered inside the input on the left — for text/symbol prefixes (e.g. "$"). Adds pl-9 padding.
suffix	opcional	`React.ReactNode`	Element rendered inside the input on the right — for text/symbol suffixes (e.g. "kg"). Adds pr-9 padding.
onChangeNumber	opcional	`(value: number) => void`	Fires alongside onChange with the parsed float value of the input. Returns 0 when value is not a valid number.
helpText	opcional	`string`	Help text displayed below input
fullWidth	opcional	`boolean`	Whether input takes full width
floatingLabel	opcional	`boolean`	Enable floating label pattern (CSS-only, no JS state)

Ejemplo del paquete

// El de formulario: trae etiqueta, error y texto de ayuda propios.
// El mensaje de `error` queda enlazado al input, así que no hace falta un <Field> alrededor.
<TextInput
  label="Nombre del salón"
  value={nombre}
  onChange={(e) => setNombre(e.target.value)}
  error={errores.nombre}
  helpText="Es el que ve el cliente."
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.