Vue Component Library

Appearance

Building Forms with Component Library ​

This guide shows you how to build complete forms using the form components from our component library.

Available Form Components ​

  • OInput - Text input fields
  • OTextArea - Multi-line text input
  • OCheckbox - Checkbox inputs
  • ORadio - Radio button groups
  • ODropdown - Select dropdowns
  • ODatePicker - Date selection
  • OTimePicker - Time selection
  • OFileInput - File upload
  • OSwitch - Toggle switches
  • OSlider - Range sliders
  • ORange - Min/max range input
  • OColorPicker - Color selection

Building Forms ​

Basic Form Structure ​

Create forms by importing the form components you need and using them with v-model for two-way data binding. Each component supports common props like label, placeholder, error, and required.

Form Validation ​

Implement validation by:

  • Using the error prop on components to display validation messages
  • Creating validation functions that check form data
  • Showing errors when validation fails
  • Using toast notifications to provide feedback

Form Submission ​

Handle form submission by:

  • Preventing default form submission with @submit.prevent
  • Validating form data before submission
  • Making API calls to submit data
  • Showing success/error messages using toast notifications
  • Resetting form after successful submission

Form Patterns ​

Real-time Validation ​

You can implement real-time validation using Vue's watch to monitor input changes and validate as the user types.

Password Strength Validation ​

Use computed properties to check password strength and display feedback to users based on length and complexity requirements.

Best Practices ​

  1. Always validate - Validate on both client and server side
  2. Show clear errors - Use the error prop on components
  3. Provide feedback - Use toast notifications for success/error
  4. Handle loading states - Disable form during submission
  5. Group related fields - Use sections or fieldsets
  6. Use appropriate input types - Email, password, number, etc.
  7. Make forms accessible - Use proper labels and ARIA attributes

📖 Related Documentation: