bx

Form

Building forms with validation and accessible field markup.

This is your public display name.

tsx 
<Form action="/api/user" method="post">
  <FormItem>
    <FormLabel htmlFor="u">Username</FormLabel>
    <FormControl><Input id="u" name="username" /></FormControl>
    <FormDescription>Your public name.</FormDescription>
  </FormItem>
  <Button type="submit">Submit</Button>
</Form>

Form — helpers de layout pour composer un formulaire avec labels, descriptions et messages d'erreur cohérents. Ne fait pas la validation (à faire côté serveur / côté client selon votre stack).

Structure : Form (wrapper) > FormItem (une ligne) > FormLabel + FormControl (wrapper du champ) + FormDescription (aide) + FormMessage (erreur ou hint).

Installation

Terminal 
$ bext ui add form

Usage

tsx 
import { Form, FormItem, FormLabel, FormControl, FormDescription, Input, Button } from "@bext-stack/ui/primitives"

<Form action="/api/login" method="post">
  <FormItem>
    <FormLabel htmlFor="email">Email</FormLabel>
    <FormControl><Input id="email" name="email" type="email" required /></FormControl>
    <FormDescription>We'll never share your email.</FormDescription>
  </FormItem>
  <Button type="submit">Log in</Button>
</Form>

Anatomy

<Form action="/submit" method="post">
  <FormItem>
    ├── <FormLabel>Email</FormLabel>
    ├── <FormControl><Input /></FormControl>
    ├── <FormDescription>We'll never share it.</FormDescription>
    └── <FormMessage>Invalid email format</FormMessage>
  </FormItem>
</Form>

API Reference

Form

Prop Type Default Description
action string — undefined
method "get" | "post" — undefined
children ReactNode — undefined

FormItem

Prop Type Default Description
children ReactNode — Container flex-col gap-2.

FormLabel

Prop Type Default Description
htmlFor string — undefined
children ReactNode — undefined

FormControl

Prop Type Default Description
children ReactNode — Wrapper direct du /