Forms

Input & field.

Labels, supporting text and useful validation.

LIVE PREVIEWTry it. It works.

Email address

Used for account updates.

Workspace ID

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/input.json

Registry setup · Open the playground

Usage

<Field label="Email" hint="Used for account updates.">
  <Input type="email" placeholder="you@example.com" />
</Field>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Field connects its label, hint and error to Input using generated IDs. Input forwards native props including required, disabled, name, value, onChange and ref. Set error on Field for an invalid state.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.