Form
Forms are the main wrapper components for form elements, with powerful customization and validation options.
Basic Example
The <i-form>
component is a wrapper that provides proper handling of form validation and form grouping. Here are some things that are good to know:
- All nested form components will inherit the form’s
disabled
andreadonly
state - All nested form components will inherit the form’s
size
variant - You can use the
@submit
binding to handle the submit event
Disabled State
Setting a form as disabled
will cause all of its child inputs to be disabled. When disabled, the form cannot be submitted.
Readonly State
Setting a form as readonly
will cause all of its child inputs to be readonly. When readonly, the form can still be submitted.
Sizes
You’re able to use the size
modifier to control the size of your <i-form>
, using one of the available sizes: sm
, md
, and lg
. The default size is set to md
.
All of the form components inside the <i-form>
will inherit the parent form group’s size.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the form - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the form - Property
inline
TypeBoolean
Defaultfalse
Description Display the form as inline - Property
loading
TypeBoolean
Defaultfalse
Description The loading state of the form - Property
name
TypeString
Defaultuid()
Description The unique identifier of the form - Property
modelValue
TypeBoolean
Defaultfalse
Description Used to set the form schema - Property
readonly
TypeBoolean
Defaultfalse
Description The readonly state of the form - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the form
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for default card content
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue schema - Property
submit
Description Event emitted for submitting the form