Form

Capa de formularios sobre TanStack Form (opt-in).

Formulario con validación (TanStack Form)

Vista previa

import { useForm } from "@tanstack/react-form";
import { Form, FormField } from "@eidondev/acme-ui/form";
import { Input, Select, Button } from "@eidondev/acme-ui";

const form = useForm({
  defaultValues: { nombre: "", frecuencia: "daily" },
  onSubmit: ({ value }) => save(value),
});

<Form form={form}>
  <FormField name="nombre" label="Nombre" required
    validators={{ onChange: ({ value }) => (!value ? "Requerido" : undefined) }}>
    {(field) => <Input {...field} />}
  </FormField>
  <FormField name="frecuencia" label="Frecuencia">
    {(field) => (
      <Select options={FREQ} value={field.value} onValueChange={field.onChange} />
    )}
  </FormField>
  <Button type="submit">Crear</Button>
</Form>

Comparación de temas

El mismo componente bajo distintos modos y marcas. No cambia el componente — solo los tokens (CSS variables) del contenedor.

Legacy · claro

Editorial · claro

Technical · oscuro

Warm · claro

Playful · claro