Forms

A guide to building forms with Shark UI components.

Docs

Picking a form library

For detailed guides with examples, validation, and field-type-specific patterns, see the linked pages above.

Field Context

Form components automatically integrate with Field through context. When nested inside a Field, they inherit disabled, invalid, required, and readOnly states automatically.

Also htmlFor and id are automatically handled by the Field component. Never use them directly.


import { Field } from "@/registry/react/components/field"
import { NumberInput } from "@/registry/react/components/number-input"
 
const Demo = () => (
  <Field disabled>
    <NumberInput>
      <NumberInputGroup>
        <NumberInputInput />
        <NumberInputIncrement />
        <NumberInputDecrement />
      </NumberInputGroup>
    </NumberInput>
  </Field>
)

Input states

Invalid

Pass the invalid prop to the Field component.

The FieldError is only visible when the invalid prop is true.


import {
  Field,
  FieldLabel,
  FieldError,
} from "@/registry/react/components/field"
import { Input } from "@/registry/react/components/input"
 
const Demo = () => (
  <form>
    <Field invalid>
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="Enter your username" />
      <FieldError>Username is required.</FieldError>
    </Field>
  </form>
)

Required

Pass the required prop to the Field component.

Optionally, you can use the FieldRequiredIndicator to indicate that the field is required.


import {
  Field,
  FieldLabel,
  FieldRequiredIndicator,
  FieldError,
} from "@/registry/react/components/field"
import { Input } from "@/registry/react/components/input"
 
export const Demo = () => (
  <form>
    <Field required>
      <FieldLabel>
        Username
        <FieldRequiredIndicator />
      </FieldLabel>
      <Input placeholder="Enter your username" />
      <FieldError>Username is required.</FieldError>
    </Field>
  </form>
)

Skills

Colors

On This Page

Picking a form library Field Context Input states Invalid Required

Forms

Picking a form library#

Field Context#

Input states#

Invalid#

Required#

Picking a form library

Field Context

Input states

Invalid

Required