Form Controls

Basic Inputs

Basic form controls are the foundation of any form interface. Each type serves a specific purpose:

• Basic Input: Standard text input for single-line text
• Input with Label: Improves accessibility and user understanding
• Input with Placeholder: Provides hint text that disappears when typing
• Input with Value: Pre-populated input field
• Border Style: Visual variation with dashed border
• Password Input: Secure input that masks characters

Floating Labels

Floating labels provide an enhanced user experience by combining labels and placeholders. Available in two styles:

• Outline: Modern look with outlined border
• Filled: Solid background for stronger visual emphasis

Special Input Types

Enhance form inputs with icons and special styling to provide better visual cues and improve usability:

• Left Icon: Places an icon before the input text for context
• Right Icon: Positions an icon after the input text
• Combined: Can be used with other input features like validation states

Input States

Form controls can be configured with different states to indicate their interaction status:

• Readonly Plain Text: Displays text that cannot be modified but can be copied
• Readonly Input: Non-editable input that maintains form styling
• Disabled Input: Completely inactive input that cannot be interacted with

Date and Time Inputs

HTML5 provides specialized input types for handling dates and times:

• Date Input: Built-in calendar picker for selecting dates
• Time Input: Time selection with hours and minutes

Textarea and Color Picker

For more complex input needs:

• Textarea: Multi-line text input ideal for longer content
• Color Picker: Native color selection interface with hex value support

Datalist and Rounded Inputs

Datalists provide suggestions as users type, while rounded inputs offer a softer visual style.

Input Sizing

Adjust input sizes to create visual hierarchy and emphasis:

• Extra Small (.form-control-xs): Compact inputs for dense forms
• Small (.form-control-sm): Reduced size for secondary inputs
• Default: Standard size for most use cases
• Large (.form-control-lg): Enhanced visibility for important fields
• Extra Large (.form-control-xl): Maximum visibility for critical inputs

File Inputs

File inputs enable users to upload files to your application:

• Default: Basic file selection with browser-native dialog
• Multiple: Allows selection of multiple files simultaneously
• Disabled: Prevents file uploads when needed

File Input Sizing

File inputs can be sized using the same classes as regular inputs, from extra small (.form-control-xs) to extra large (.form-group-xl), providing flexibility in your form design.

Input Groups

Input groups combine form controls with additional elements:

• Text Add-ons: Add context before or after inputs (e.g., @, $)
• Button Add-ons: Add interactive elements like buttons
• Multiple Add-ons: Combine multiple elements for complex inputs
• Textarea Support: Works with multi-line inputs as well

Input Group Sizing

Use size classes from input-group-xs to input-group-xl to modify the size of input groups. Each size is optimized for different use cases, from compact layouts to prominent form elements.

Checkboxes and Radios in Input Groups

Combine selection controls with text inputs for advanced functionality:

• Checkbox Groups: Toggle features or enable/disable input functionality
• Radio Groups: Switch between different input modes or options

Buttons and Dropdowns in Input Groups

Enhance input functionality with interactive elements:

• Button Add-ons: Trigger actions directly related to the input
• Multiple Buttons: Combine multiple actions in a single input group
• Dropdown Integration: Add dropdown menus for additional options