Oros UI

Search documentation

Search Oros UI pages and components.

Form

Combines accessible fields, controls, validation, and actions.

This name appears across your workspace.

Installation

Install Form from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/form

Form is a documented composition and does not install a standalone file. Add the parts used by your form separately.

pnpm dlx shadcn@4.13.0 add @oros/field @oros/input @oros/button

Usage

import { Button } from "@/components/ui/button"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function Example() {
  return (
    <form>
      <Field>
        <FieldLabel htmlFor="email">Email</FieldLabel>
        <Input id="email" name="email" type="email" />
      </Field>
      <Button type="submit">Save</Button>
    </form>
  )
}

Open the Source tab in the preview for a complete working example.

Anatomy

Form combines native form semantics with Field, Input, Button, and any other controls your workflow needs. It does not introduce a separate form-state library.

API Reference

Form has no standalone source export. Its API comes from the native form element and the Field, Input, Button, and other controls used in the composition.

Accessibility

  • Connect every label, description, and error message to its control, and preserve native form submission semantics.
  • Expose invalid state programmatically and move focus only when it helps the user recover from a failed submission.

Source

Form is a documented Oros composition built from Field, Input, Button, and other controls. It does not install a standalone source file. The Source tab above shows a complete usage example.

Migrating from COSS? Install form in place of coss-form.