Examples
This section contains a collection of practical examples demonstrating the usage of various components from the @dynamicforms/vuetify-inputs library. Each example includes a working demo component and its corresponding code.
Density and Variant demo
This demo showcases support for various component variants and densities. It also demonstrates vertical alignment of component parts so that your forms look perfectly aligned in all respects.
Common Base Component
InputBase
The base component for all input elements. Contains documentation about common props, events, and behavior shared by all input components.
Input Fields
df-actions
A component for rendering a group of actions.
df-checkbox
A component for checkbox / ternary selection.
df-color
A color input.
df-date-time
A component for date and time selection.
df-file
A component for file uploads.
df-input
A component for general data entry.
df-rtf-editor
A RTF editor input.
df-select
A component for selecting values from a list. The examples showcase:
- Basic usage with a static list
- Advanced features (multiple selection, AJAX loading, icons)
- Integration with DynamicForms
df-text-area
A component for multi-line text input.
Integration Options
Using with vue-forms
Examples of integrating Vuetify input fields with the @dynamicforms/vue-forms library.
Validation
Various ways to validate input fields.