Preview

Import

import { Form, Field, FieldLabel, FieldError } from "@sigil-ui/components";

Usage

<Form onSubmit={(data) => console.log(data)}>
  <Field>
    <FieldLabel>Name</FieldLabel>
    <Input name="name" required />
  </Field>
  <Button type="submit" variant="primary">Submit</Button>
</Form>

With validation

<Form
  onSubmit={(data) => save(data)}
  onError={(errors) => console.log(errors)}
>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input name="email" type="email" required />
    <FieldError>Please enter a valid email.</FieldError>
  </Field>
  <Button type="submit" variant="primary">Sign up</Button>
</Form>

Controlled with react-hook-form

import { useForm } from "react-hook-form";

function SignupForm() {
  const { register, handleSubmit } = useForm();

  return (
    <Form onSubmit={handleSubmit((data) => save(data))}>
      <Field>
        <FieldLabel>Username</FieldLabel>
        <Input {...register("username", { required: true })} />
      </Field>
      <Button type="submit" variant="primary">Create account</Button>
    </Form>
  );
}

Token integration

CSS Variable	Used for
`--s-space-6`	Gap between form fields
`--s-error`	Validation error state
`--s-duration-fast`	Error shake animation

Props

Prop	Type	Default	Description
`onSubmit`	`(data: FormData) => void`	—	Submit handler
`onError`	`(errors: Record<string, string>) => void`	—	Validation error handler
`disabled`	`boolean`	`false`	Disable all fields
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Form content

Plus all standard <form> HTML attributes.

Accessibility

Uses native <form> element with noValidate for custom validation
Error messages are linked via aria-errormessage
Focus moves to the first invalid field on submit

On this page