Formulario

Campos monocromos: Input, Select, Textarea, Checkbox, Radio y Toggle. Prefijo/sufijo/icono, estados error/success y a11y.

Preview principal

FORM · SIGN UPdraft

Input

Prefijo, sufijo, icono, tooltip y texto de apoyo.

INPUT

Default

Con tooltip

Obligatorio

Con prefijo

Con sufijo

Con icono

Texto de apoyo

Ayuda bajo el campo.

Búsqueda

tamaños

Small

Default

Large

estados

Disabled

Error

Este campo es obligatorio.

Success

Correcto.

Textarea / Select

TEXTAREA · SELECT

Mensaje

Varias líneas.

Con error

Este campo es obligatorio.

País

País (objeto)

País (disabled)

Checkbox / Radio / Toggle

CONTROLES

checkbox

Activo

Seleccionado

Deshabilitado

radio

Activo

Seleccionado

Deshabilitado

toggle

Uso

import { Input, Select, Checkbox, Radio, Toggle, Button, Icon } from "devsoftec-ui";

<form>
  <Input
    name="email"
    label="Email"
    mandatory
    icon={<Icon name="mail" size={15} />}
    placeholder="jane@acme.com"
    tooltip="Usaremos este email para el acceso."
  />
  <Select
    name="country"
    label="País"
    placeholder="Selecciona un país"
    options={["España", "Italia"]}
  />
  <Checkbox name="terms" required label="Acepto los términos" />
  <Radio name="plan" value="pro" label="Plan Pro" />
  <Toggle label="Recibir novedades" defaultChecked={false} />
  <Button type="submit">Enviar</Button>
</form>

Para búsqueda con sugerencias usa Combobox; el Select es el nativo estilizado.

Props (Input)

Prop	Tipo	Default	Descripción
`label`	`string`	—	Etiqueta
`id` / `name`	`string`	auto / —	Identidad HTML
`tooltip`	`ReactNode`	—	Ayuda (Tooltip)
`mandatory` / `required`	`boolean`	—	Obligatorio + `*`
`prefix` / `suffix`	`string`	—	Texto fijo
`icon`	`ReactNode`	—	Icono izquierdo
`trailing`	`ReactNode`	—	Slot derecho
`supportingText`	`ReactNode`	—	Ayuda bajo el campo
`error` / `success`	`ReactNode`	—	Estado + ARIA
`size`	`sm \| md \| lg`	`md`	Tamaño
`disabled`	`boolean`	—	Deshabilitado

El resto de attrs nativos de <input> se reenvían.

Otros controles

Control	Notas
Select	`options` string o `{ label, value, disabled }`
Textarea	Mismas props de campo (`label`, `error`, …)
Checkbox	Nativo estilizado
Radio	Comparten `name`
Toggle	`role="switch"` · `onCheckedChange`

Comportamiento

error / success → borde + aria-describedby
mandatory → required + asterisco visual
Labels asociados + foco visible
Tooltip en el icono de ayuda
Submit y acciones → Button de la librería (no HTML suelto)