Skip to main content Skip to docs navigation
View on GitHub

Form Input

Text input fields that enable users to enter and edit data such as names, emails, passwords, or other textual information.

On this page
This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Variants

Different configurations and states available for form components to accommodate various use cases, user interactions, and visual requirements. These variants provide flexibility in appearance, behavior, and functionality while maintaining design consistency across the system.

Form Input Component

Individual input elements that capture user data through different input methods and visual states. These components serve as the core interactive elements within forms, adapting their appearance and behavior based on user interaction, content status, and validation requirements.

Style Variants

Visual presentation modes that affect the input field's label positioning and overall appearance within the form interface. These variants determine the visual design approach and space utilization for different design contexts and user experience requirements.

Style variants are implemented as separate Figma components across multiple files to optimize performance. Each component has the same type, activity, size, and state variants.

Form Input variant example image Form Input variant example image

Regular

Traditional input field styling with label positioned above the input area. Use for most form implementations requiring clear labeling, conventional form patterns, or when maintaining standard form design conventions with separate label and input areas.

Form Input variant example image Form Input variant example image

Floating

Modern input field styling with animated floating label that moves when the field becomes active. Use for contemporary form interfaces, space-efficient designs, or when providing elegant label transitions that combine label and placeholder functionality.

Form Input variant example image Form Input variant example image

Outline

Outlined input field styling with border emphasis and integrated label positioning. Use for forms requiring strong visual definition, material design patterns, or when field boundaries need clear emphasis within the interface.

Type Variants

Different input methods for collecting various types of user data, each optimized for specific content types and interaction patterns. These variants determine the fundamental behavior and interface of the input element.

Form Input variant example image Form Input variant example image

Text

Single-line input field for alphanumeric characters, passwords, and short text entries. Use for names, email addresses, phone numbers, and other concise data input.

Form Input variant example image Form Input variant example image

Select

Dropdown menu allowing users to choose from predefined options. Use when presenting 4 or more mutually exclusive choices to save space and guide user selection.

Form Input variant example image Form Input variant example image

Date

Input field with date picker functionality for selecting dates. Provides calendar interface to ensure proper date format and reduce input errors.

Form Input variant example image Form Input variant example image

Textarea

Multi-line input field for longer text content and comments. Use for descriptions, feedback, messages, or any content requiring multiple lines.

Activity Variants

Visual states that indicate whether the input field contains user data or remains empty. These variants help users understand the current content status and provide appropriate visual feedback for populated versus unpopulated fields.

Form Input variant example image Form Input variant example image

Active

Input field contains user-entered content or selected values. Visual styling indicates populated state to help users track completion progress.

Form Input variant example image Form Input variant example image

Inactive

Input field is empty and displays placeholder text. Provides visual cues about expected input format and helps users understand field purpose.

Size Variants

Different dimensional scales for form input components to accommodate various layout requirements and visual hierarchies. These variants maintain proportional relationships while adapting to different design contexts and space constraints.

Form Input variant example image Form Input variant example image

Large

Expanded input size designed for prominent form elements and improved touch accessibility. Use for primary call-to-action forms, mobile interfaces, or when enhanced visibility is required.

Form Input variant example image Form Input variant example image

Medium

Standard input size providing balanced proportions for most form implementations. Use as the default size for primary forms and general data collection interfaces.

Form Input variant example image Form Input variant example image

Small

Compact input size optimized for dense layouts and secondary form elements. Use in constrained spaces, inline forms, or when multiple inputs need to fit within limited screen real estate.

State Variants

Interactive states that affect user interaction capabilities and visual feedback based on current user activity and system conditions. These variants communicate the input's availability, validation status, and guide users through successful form completion.

Form Input variant example image Form Input variant example image

Idle

Default state when the input field is not being interacted with. Neutral appearance indicates field is available for interaction.

Form Input variant example image Form Input variant example image

Disabled

Input field is non-interactive and cannot receive user input. Reduced visual prominence indicates unavailability while maintaining form structure.

Form Input variant example image Form Input variant example image

Focus

Input field is currently selected and ready for user input. Enhanced visual styling and cursor presence indicate active interaction state.

Form Input variant example image Form Input variant example image

Error

Input field contains invalid data or failed validation. Error styling and messaging guide users toward correct input format.

Form Input variant example image Form Input variant example image

Success

Input field contains valid data that passed validation requirements. Success indicators provide positive feedback and reduce user anxiety.

Form Field

Complete form elements that combine input components with labels, validation, and helper text for comprehensive user experience. These composite components provide proper accessibility, visual hierarchy, and contextual information necessary for effective form design and user guidance.

Type Variants

Different form field configurations based on the type of input component used, each maintaining consistent labeling, spacing, and helper text positioning while adapting to the specific requirements of the embedded input type.

Form Input variant example image Form Input variant example image

Text

Complete form element including label, input field, and optional helper text. Provides full context for single-line data entry with proper accessibility markup and clear visual hierarchy.

Form Input variant example image Form Input variant example image

Select

Complete form element with label, dropdown menu, and optional helper text. Combines selection interface with descriptive labeling and guidance for complex choice scenarios.

Form Input variant example image Form Input variant example image

Textarea

Complete form element with label, multi-line input area, and optional helper text. Optimized layout for longer content input with appropriate spacing and text flow considerations.

Form Input variant example image Form Input variant example image

Medium

Standard input size providing balanced proportions for most form implementations. Use as the default size for primary forms and general data collection interfaces.

Form Input variant example image Form Input variant example image

Large

Expanded input size designed for prominent form elements and improved touch accessibility. Use for primary call-to-action forms, mobile interfaces, or when enhanced visibility is required.

State Variants

Interactive states that affect user interaction capabilities and visual feedback based on current user activity and system conditions. These variants communicate the input's availability, validation status, and guide users through successful form completion.

Form Input variant example image Form Input variant example image

Idle

Default state when the input field is not being interacted with. Neutral appearance indicates field is available for interaction.

Form Input variant example image Form Input variant example image

Disabled

Input field is non-interactive and cannot receive user input. Reduced visual prominence indicates unavailability while maintaining form structure.

Form Input variant example image Form Input variant example image

Focus

Input field is currently selected and ready for user input. Enhanced visual styling and cursor presence indicate active interaction state.

Form Input variant example image Form Input variant example image

Error

Input field contains invalid data or failed validation. Error styling and messaging guide users toward correct input format.

Form Input variant example image Form Input variant example image

Success

Input field contains valid data that passed validation requirements. Success indicators provide positive feedback and reduce user anxiety.

Form Field Component

Complete form elements that combine input components with labels, validation, and helper text for comprehensive user experience. These composite components provide proper accessibility, visual hierarchy, and contextual information necessary for effective form design and user guidance.

Type Variants

Different form field configurations based on the type of input component used, each maintaining consistent labeling, spacing, and helper text positioning while adapting to the specific requirements of the embedded input type.

Form Input variant example image Form Input variant example image

Text

Complete form element including label, input field, and optional helper text. Provides full context for single-line data entry with proper accessibility markup and clear visual hierarchy.

Form Input variant example image Form Input variant example image

Select

Complete form element with label, dropdown menu, and optional helper text. Combines selection interface with descriptive labeling and guidance for complex choice scenarios.

Form Input variant example image Form Input variant example image

Textarea

Complete form element with label, multi-line input area, and optional helper text. Optimized layout for longer content input with appropriate spacing and text flow considerations.