Hewn
Components

Components

Form

Accessible form container for native and custom field validation.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add form

Thin wrapper around React Aria Form. Compose Hewn fields inside and use native constraint validation or validationErrors for server feedback.

Editors can publish; viewers cannot.

Usage

TSX
import { Button, Form, TextField } from "@hewnui/ui";

<Form onSubmit={(event) => event.preventDefault()}>
  <TextField label="Email" name="email" type="email" isRequired />
  <Button type="submit">Continue</Button>
</Form>

Notes

  • No React Hook Form or Formik dependency
  • Fields keep their own labels, descriptions, and errors
  • Use validationErrors for server-side messages keyed by field name

Accessibility

  • Landmark form role when labeled
  • Focus moves to the first invalid field on failed submit

API reference

Props for Form from @hewnui/ui/form. Generated from component types — not hand-written.

Prop

Type

Slider

Single-value range control with tabular output and accessible thumb.

Select

Single-select control with popover listbox.

On this page

UsageNotesAccessibility