FormField

FormField

Basic with Input

Username

With Description

PasswordMust be at least 8 characters with one number

With Error State

EmailWe'll never share your email

Static Error ExampleThis field is required

Required Field

Full Name*

Role*Select a roleAdminUserGuest

With Textarea

BioTell us a little about yourself

Usage

import { FormField, Input } from "@f0rbit/ui";

<FormField label="Username" id="username">
  <Input id="username" placeholder="Enter username" />
</FormField>

With Description

Add helper text below the input:

<FormField
  label="Password"
  description="Must be at least 8 characters with one number"
  id="password"
>
  <Input id="password" type="password" />
</FormField>

Error State

Display validation errors:

<FormField
  label="Email"
  error="Please enter a valid email address"
  id="email"
>
  <Input id="email" error />
</FormField>

Required Fields

Show a required indicator:

<FormField label="Full Name" required id="fullname">
  <Input id="fullname" />
</FormField>

With Select

FormField works with any form input:

<FormField label="Role" required id="role">
  <Select id="role">
    <option value="">Select a role</option>
    <option value="admin">Admin</option>
    <option value="user">User</option>
  </Select>
</FormField>

With Textarea

<FormField
  label="Bio"
  description="Tell us a little about yourself"
  id="bio"
>
  <Textarea id="bio" placeholder="I'm a software developer who..." />
</FormField>

Props

Prop	Type	Default	Description
label	string	—	Label text for the field
description	string	—	Helper text below the input
error	string	—	Error message to display
required	boolean	false	Show required indicator
id	string	—	ID to associate label with input