Form Field

Stable

A wrapper component for managing form labels, validation errors, and helper text.

Examples

Basic Usage

Note: SiberUI components like Input and Select already have this built-in via the label and error props. Use FormField when you need to wrap custom components.

Custom Input Area

Wraps any child element.

tsx
<FormField label="Custom Component" helperText="Wraps any child element.">
  <div className="h-10 w-full rounded border border-white/10 bg-white/5 p-2 text-sm text-slate-300">
    Custom Input Area
  </div>
</FormField>

Required & Error States

tsx
<FormField label="Email" required error="Email is already in use.">
  <Input defaultValue="hacker@matrix.com" error />
</FormField>

API Reference

PropertyDescriptionTypeDefault
labelText rendered above the child.string-
errorError state and message. Replaces helperText if present.string | boolean-
helperTextHelper text rendered below the child.string-
requiredAdds a cyan dot indicator next to the label.boolean-
disabledDims the entire form field wrapper.boolean-