pages._explore-components-interaction-form.title
pages._explore.sections.basic-usage.title
html
<Form
identifier="example-form"
:field-config="basicFieldConfig"
/>typescript
<script setup lang="ts">
import { FormFieldTypes } from '#core-types/components/interaction/form'
const formFieldConfig = [
{
id: 'input2', // identifier of the form field
type: FormFieldTypes.INPUT, // type of the field - in this case a simple INPUT field, but can be TEXTAREA, CHECKBOX, or any of the other available and handled types
label?: 'Input2 Label', // label for the form field
placeholder?: 'Your Input goes here', // the placeholder text that goes inside the field
tooltip?: 'This is a tooltip for the input2 field. Its awesome 🥳', // a tooltip text that automatically renders a tooltip icon next to the label
state?: FormFieldState.DISABLED, // the state the field can be put in if required
hint?: 'This is a hint for the Input2 Field', // a hint string that gets rendered underneath the field, where validation results also would be rendered
classes?:'md:col-span-6 lg:col-span-4', // fields accept specific classes which mostly enable and easy building of multi column fields
value?: 'Initial', // the initial value you want to give your field
updateTrigger?: InputUpdateTriggerTypes.BLUR, // the Update Trigger when validation and field data updates should happen. It differes depending on the field type e.g. here on INPUT or BLUR
mandatory?: true // setting the field mandatory. This also creates and automatic validation rule inside the form logic depending on the field type
}
]
// state
const basicFieldConfig = ref([
{
id: 'name',
type: FormFieldTypes.INPUT,
label: 'Name',
placeholder: 'Enter your name',
mandatory: true
},
{
id: 'email',
type: FormFieldTypes.INPUT,
label: 'Email',
placeholder: 'Enter your email',
mandatory: true
}
])
</script>pages._explore.sections.complex-usage.title
Form (complex-form) - Debug
Form Field Data
{
"data": {},
"state": "idle"
}Form Field Information
{
"firstName": {},
"lastName": {},
"bio": {},
"newsletter": {},
"terms": {}
}html
<Form
identifier="complex-form"
:field-config="complexFieldConfig"
debug
eager-validation
:form-action="fnProcessForm"
/>typescript
<script setup lang="ts">
import { FormFieldTypes, FormFieldState } from '#core-types/components/interaction/form'
// state
const complexFieldConfig = ref([
{
id: 'firstName',
type: FormFieldTypes.INPUT,
label: 'First Name',
placeholder: 'Enter first name',
mandatory: true,
cols: 6
},
{
id: 'lastName',
type: FormFieldTypes.INPUT,
label: 'Last Name',
placeholder: 'Enter last name',
mandatory: true,
cols: 6
},
{
id: 'bio',
type: FormFieldTypes.TEXTAREA,
label: 'Biography',
placeholder: 'Tell us about yourself',
mandatory: false
},
{
id: 'newsletter',
type: FormFieldTypes.CHECKBOX,
label: 'Subscribe to newsletter',
mandatory: false
},
{
id: 'terms',
type: FormFieldTypes.CHECKBOX,
label: 'Accept terms and conditions',
mandatory: true
}
])
// methods
const fnProcessForm = async (data: FormData) => {
console.log('Processing form data:', data)
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 2000))
}
</script>pages._explore.sections.props.title
Prop | Default | Type |
|---|---|---|
| identifier | '' | string |
| fieldConfig | [] | FormFieldConfig[] |
| disabled | false | boolean |
| debug | false | boolean |
| fieldUpdateDebounceDelay | 250 | number |
| eagerValidation | false | boolean |
| autotrigger | false | boolean |
| lockFormOnAction | false | boolean |
| formAction | undefined | Function |
pages._explore.sections.types.title
Name | Type | Options |
|---|---|---|
| FormFieldTypes | enum | INPUT | TEXTAREA | CHECKBOX | TOGGLE | SELECT |
| FormFieldState | enum | DISABLED | WARNING | ERROR | SUCCESS |
| FormStateOptions | enum | IDLE | ACTION_TO_BE_TRIGGERED | DIRTY | CLEAN | ACTION_IN_PROGRESS | ERROR |