LogoPuzzle
Skip to Content
Puzzle
UI ComponentsForms

Form Field

Connect a label, description, and validation message to a control.

Import

import { FormField } from "@puzzle-ui/ui";

Labels and validation

Pass one control as the direct child. Form Field supplies its ID, required/disabled state, aria-describedby, and invalid state. It preserves existing description relationships.

390 × 450

API

PropTypeDefaultDescription
childrenReactElementRequiredSingle control accepting ID and form attributes.
label, descriptionReactNode-Visible label and supporting text.
errorReactNode | boolean-Validation message; true uses the default message.
invalidbooleanWhether an error existsExplicit invalid state.
required, disabled, optionalbooleanfalseControl state and label indicators.
controlIdstringExisting child ID or generatedActual control ID.

Native div attributes apply to the root. Custom controls must forward the supplied accessibility attributes to their actual form element.

File Upload

Select, validate, and upload files with a keyboard-accessible dropzone.

Input Group

Pair an input with leading or trailing text and actions.

On this page

ImportLabels and validationAPI
;