Forms

Acciones primarias y secundarias. Seis variantes semánticas, tres tamaños, cinco estados. El variante primary es el CTA global; secondary para acciones neutras; ghost para acciones terciarias; danger para destructivas; link para navegación inline. Todos los tamaños por defecto son de 32px para maximizar densidad en backoffice.

// Uso básico
<Button variant="primary">Guardar</Button>
<Button variant="secondary" size="sm">Cancelar</Button>
<Button variant="danger" loading>Eliminar</Button>
<Button variant="primary" block>Continuar</Button>

Botón cuadrado de icono puro. Para barras de acciones densas, toolbars y controles inline donde el texto ocuparía demasiado. Requiere aria-label obligatorio. Cuando se use junto a iconos de Onaris UI, el contenedor aplica color vía currentColor.

<IconButton variant="ghost" aria-label="Editar">
  <IconLapiz />
</IconButton>

Campo de texto de una línea. Soporta todos los type HTML (text, number, password, email, search, tel, url). Acepta prefix y suffix para unidades, iconos o acciones. Siempre se usa envuelto en <Field> con label y hint opcional.

<Field label="Nombre" hint="Aparecerá en la ficha">
  <Input placeholder="Camiseta algodón" />
</Field>

<Field label="Precio">
  <Input type="number" prefix="€" />
</Field>

<Field label="Email" error="Formato no válido">
  <Input type="email" />
</Field>

Campo de contraseña con botón para mostrar/ocultar el texto, usando los iconos ojo / ojo-oculto de Onaris. Por defecto oculta el contenido.

<Field label="Contraseña">
  <PasswordInput value={pw} onChange={setPw} />
</Field>

Campo de texto multilínea, redimensionable en vertical. Mismas convenciones que Input: se usa dentro de Field con label y hint.

<Field label="Descripción">
  <Textarea rows={4} placeholder="Describe el artículo…" />
</Field>

Desplegable de selección única. Es un combobox custom, no un <select> nativo: así el menú desplegado usa los mismos tokens que el resto del sistema en todos los navegadores. Prueba a abrir cualquiera de los ejemplos — el menú es idéntico al documentado abajo.

<Field label="Categoría">
  <Select value={category} onChange={setCategory}>
    <Select.Option value="camisetas">Camisetas</Select.Option>
    <Select.Option value="pantalones">Pantalones</Select.Option>
  </Select>
</Field>

// Con búsqueda
<Select searchable options={cats} />

Selección de fecha con icono calendario de Onaris. Al enfocar despliega un calendario; admite rango con range. El input es editable manualmente respetando el formato.

<DatePicker value={date} onChange={setDate} format="dd/MM/yyyy" />
<DatePicker range value={[from, to]} onChange={setRange} />

Selección de hora con icono reloj de Onaris. Formato 24h por defecto, con paso configurable (minutos).

<TimePicker value={time} onChange={setTime} step={15} />

Selección de color con muestra (swatch) a la izquierda y valor hexadecimal editable. Al abrir despliega un selector. Útil para marcar familias, etiquetas o temas de catálogo.

<ColorPicker value={color} onChange={setColor} />

Selección múltiple. Admite estado indeterminate para headers de tabla que controlan la selección de todas las filas. Label clickeable por defecto.

<Checkbox checked={value} onChange={setValue}>
  Destacar en catálogo
</Checkbox>

<Checkbox indeterminate>Todos</Checkbox>

Selección única exclusiva. Siempre se usa dentro de RadioGroup, que coordina el estado y el name del grupo.

<RadioGroup name="visibilidad" value={value} onChange={setValue}>
  <Radio value="clientes">Solo clientes</Radio>
  <Radio value="todos">Todos</Radio>
  <Radio value="admin">Privado</Radio>
</RadioGroup>

Toggle de activación instantánea. Usar para ajustes que se aplican en el momento (modo oscuro, visibilidad, notificaciones). Para opciones que se confirman con submit, usar Checkbox.

<Switch checked={dark} onChange={setDark}>
  Modo oscuro
</Switch>