Forms & choicesBrick 0.1.2

Form

Form is Brick’s styled form boundary over Atom’s native form behavior.

Live example

Built from the published package

Interactive

Choose with confidence

Know when Form is the right part

Use it when

Use it as the submission boundary around Brick fields and fieldsets.

Choose another path when

Do not use it as a form state library, schema validator, data client, or replacement for Field relationships.

Installation and imports

tsx

import { Form } from "@flowstack-ui/brick/form";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/form.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Form action="/profile" method="post">
  <Field.Root name="name"><Field.Label>Name</Field.Label><input /></Field.Root>
  <Button type="submit">Save</Button>
</Form>

Visual recipes and states

Form supplies consistent vertical spacing only. Browser validation, native submission/reset, Atom submission state, and child invalid/disabled states remain behavior rather than visual recipes.

Examples

tsx

<Form onSubmit={(event) => { event.preventDefault(); }}>
  {/* fields */}
  <Button type="submit">Submit</Button>
</Form>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are Form and FormProps.

Prop	Values	Default
`asChild`	`boolean`	`false`

Form adds no component-specific prop. It inherits Atom/native form props, submission callbacks/state attributes, and a discriminated composition API: asChild: true requires one element and excludes render; otherwise render and normal children are available.

Shared responsibility

Accessibility

Use native labeled controls, Field/Fieldset relationships, clear errors, and a discoverable submit action. Form does not announce custom validation or submission results automatically.

Responsive behavior

Form follows available width and does not choose columns or breakpoints. Compose responsive layout inside it.

Stable visual contract

Styling and tokens

Customization

Set native/Atom form behavior first, then public Form tokens. Use className or style for scoped layout exceptions.

Tokens and CSS hooks

Stable hooks are .brick-form, overridable data-slot with default form, Atom form state attributes, and --brick-form-gap plus --brick-form-fieldset-gap.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground