componente · @solu30/ui-kit/input

Input

Campo de texto crudo con prefijo y sufijo adentro; sin etiqueta, sin error y sin texto de ayuda.

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

TheCharterPanel
carlosmartinpavon
cmp-packages
dietaly
easycharter
elliot
gestorsalon
luigi
raquetea
zentrya

El componente, montado

Cargando el espécimen…

export function FieldWrapperMatrix() {
  return (
    <Stage label="Field · asocia label+error+required, pero no aria-describedby" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
        <Field label="Apellido del pasajero" required htmlFor="apellido-pasajero" size="sm">
          <Input id="apellido-pasajero" placeholder="Ej: Fernández" />
        </Field>
        <Field
          label="DNI"
          htmlFor="dni-pasajero"
          error="El DNI tiene que tener 8 dígitos"
          size="sm"
        >
          <Input id="dni-pasajero" defaultValue="12345" />
        </Field>
        <Field
          label="Teléfono de contacto"
          htmlFor="tel-pasajero"
          warning="Sin código de país: puede fallar el WhatsApp de confirmación"
          size="sm"
        >
          <Input id="tel-pasajero" defaultValue="351 555 0134" />
        </Field>
        <Field
          label="Observaciones"
          description="Visible solo para el equipo de guardia"
          orientation="horizontal"
          htmlFor="obs-pasajero"
        >
          <TextArea id="obs-pasajero" placeholder="Sin observaciones" />
        </Field>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · FieldWrapperMatrix: 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 { Input } from '@solu30/ui-kit/input'

Props

3 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
prefix	opcional	`ReactNode`	Element rendered inside the input on the left (e.g. "$"). Adds pl-9 padding.
suffix	opcional	`ReactNode`	Element rendered inside the input on the right (e.g. "kg"). Adds pr-9 padding.
onChangeNumber	opcional	`(value: number) => void`	Fires alongside onChange with the parsed float value. Returns 0 for non-numeric input.

Ejemplo del paquete

// El input pelado: hereda todo lo de <input> menos prefix/suffix, que acá son ReactNode.
<Input type="email" placeholder="cliente@correo.com" value={mail} onChange={(e) => setMail(e.target.value)} />

<Input prefix={<span className="text-content/40">$</span>} onChangeNumber={setMonto} />

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.