Lumi UILumi UI

Base UI

Building accessible forms with constraint validation, accessible labels, and seamless integration with Base UI components.

Project Inquiry

Tell us about your idea to get an estimated quote.

A short name for this project

The core technology you want us to use.

Budget Range
$5,000 – $20,000
Primary Priority
Included Services

About

This form implementation is built on top of Base UI Form and Base UI Field. It leverages the native Constraint Validation API, meaning you can often build robust forms without needing external libraries like React Hook Form or Zod, though they are fully supported.

Anatomy

<Form>
  <Field>
    <FieldLabel /> 
    <FieldControl />
    <FieldDescription />
    <FieldError />
  </Field>
  <Button type="submit"/>
</Form>

Basic Usage

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldControl,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field";
import { Form } from "@/components/ui/form";
 
export const BasicForm = () => {
  return (
    <Form onFormSubmit={(value) => console.log(value)}>
      <Field name="username">
        <FieldLabel>Username</FieldLabel>
        <FieldControl minLength={3} required />
        <FieldDescription>Public display name.</FieldDescription>
        <FieldError />
      </Field>
      <Button>Submit</Button>
    </Form>
  );

Build Individual Component

Pass the name prop to <FieldRoot> to include the wrapped control's value when a parent form is submitted

With Input

With Select

Choose your favorite fruit from the list below.

With Autocomplete

Select your favorite framework

With Combobox

Select your favorite framework

With Radio Group

Storage type

With Checkbox Group

Select your favorite fruits

Fuji apples are sweet

Gala apples are crisp

Granny Smith apples are tart

With Checkbox

By checking this box, you agree to our terms and conditions

With Slider

Budget Range

With Switch

Receive email notifications about new messages and updates

With Number Field

Please enter a quantity between 1 and 99

Server Actions With Zod

Select apple to see error

Server Actions With Zod Controlled Mode

Select apple to see error

Integration with React Hook Form

See Form Integration with React Hook Form.