componente · @solu30/ui-kit/input

Field

Envoltura de campo con etiqueta, descripción, error, advertencia y orientación vertical u horizontal.

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

TheCharterPanel
carlosmartinpavon
dietaly
gestorsalon
luigi
prepchat

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 { Field } from '@solu30/ui-kit/input'

Props

10 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
label	opcional	`string`	Field label
description	opcional	`string`	Help text below the field
error	opcional	`string`	Error message — shows in red, replaces description
warning	opcional	`string`	Warning message — shows in yellow
required	opcional	`boolean`	Show required asterisk
orientation	opcional	`'vertical' \| 'horizontal'`	Layout orientation
htmlFor	opcional	`string`	HTML id for the input (auto-links label via htmlFor)
size	opcional	`'sm' \| 'md' \| 'lg'`	Size variant
className	opcional	`string`	Additional className
children	sí	`ReactNode`	—

Ejemplo del paquete

// Envuelve un control que NO trae etiqueta propia. `htmlFor` tiene que ser el id del control.
<Field label="Salón" required error={errores.salon} htmlFor="salon">
  <SelectRoot value={salon} onValueChange={setSalon}>
    <SelectTrigger id="salon"><SelectValue placeholder="Elegí uno" /></SelectTrigger>
    <SelectContent>
      <SelectItem value="norte">Norte</SelectItem>
    </SelectContent>
  </SelectRoot>
</Field>

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.