Forms

Input & field.

Labels, supporting text and useful validation.

LIVE PREVIEWTry it. It works.

Email address

Used for account updates.

Workspace ID

Usage

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

Import components from @bld8/ui and include @bld8/ui/styles.css once. Wrap the application 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.