- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
A flexible field component for building forms with text inputs, selects, textareas, checkboxes, and switches. Includes built-in label, description, error handling, and validation support.
For collections of fields with layout options and drag-and-drop, see Fields.
Basic Usage
A simple text field with label and placeholder.
Field Types
The Field component supports multiple input types, each with appropriate keyboard and validation behavior.
Text-based Fields
Text, number, email, tel, url, and date inputs with browser-native validation and mobile keyboard optimization.
Text Area
Multi-line text input with configurable rows.
Select Dropdown
Dropdown selection with predefined options.
Boolean Fields
Checkbox
Checkbox input for binary choices, typically with explicit consent or agreement.
Switch
Toggle switch for settings and preferences, typically with on/off states.
Receive email notifications about updates
Validation & Errors
Helper Text
Add description text to provide guidance or formatting requirements.
Choose a unique username (3-20 characters)
Must be at least 8 characters with uppercase and lowercase letters
Error Messages
Display validation errors with semantic styling and ARIA attributes.
Required Fields
Mark required fields with an asterisk indicator.
Field States
Disabled State
Disable field interaction for locked or unavailable options.
Read-only Display
Use the readonly variant to display field values without form inputs.
usr_1234567890
2024-01-15
Active
Orientation
Horizontal Layout
Place label and input side-by-side instead of stacked. Particularly useful for switches and checkboxes in settings panels.
Receive updates via email
Receive updates via SMS
Form Integration
Complete form example with state management, validation, and error handling.
API Reference
FieldItemProps
| Prop | Type | Default | Description |
|---|---|---|---|
field | FieldItemData | - | Field configuration object |
variant | "editable" | "readonly" | "compact" | "editable" | Display mode |
size | "default" | "sm" | "lg" | "default" | Size variant |
orientation | "vertical" | "horizontal" | "vertical" | Label/input layout |
onChange | (id, value) => void | - | Called when value changes |
onBlur | (id) => void | - | Called when field loses focus |
classNames | object | - | CSS classes for sub-components |
FieldItemData Interface
| Property | Type | Description |
|---|---|---|
id | string | number | Unique field identifier |
label | string | Field label text |
value | string | number | Current field value (for text inputs) |
checked | boolean | Current checked state (for checkbox/switch) |
placeholder | string | Placeholder text |
description | string | Helper text displayed below input |
error | string | Error message (replaces description) |
type | "text" | "number" | "email" | "tel" | "url" | "date" | "textarea" | "select" | "checkbox" | "switch" | Input type |
required | boolean | Mark field as required |
disabled | boolean | Disable field interaction |
options | Array<{label: string, value: string}> | Options for select type |
rows | number | Number of rows for textarea (default: 3) |
render | (field) => ReactNode | Custom render function |