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 and readonly state
  • All nested form components will inherit the form’s size variant
  • You can use the @submit binding to handle the submit event

<i-form @submit="onSubmit">
    <i-form-group>
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Select</i-form-label>
        <i-select v-model="select" :options="options" placeholder="Choose an option" />
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox Group</i-form-label>
        <i-checkbox-group v-model="checkboxGroup">
            <i-checkbox value="apple">Apple</i-checkbox>
            <i-checkbox value="banana">Banana</i-checkbox>
            <i-checkbox value="strawberry">Strawberry</i-checkbox>
            <i-checkbox value="mango">Mango</i-checkbox>
        </i-checkbox-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Radio Group</i-form-label>
        <i-radio-group v-model="radioGroup">
            <i-radio value="coconut">Coconut</i-radio>
            <i-radio value="passionfruit">Passion fruit</i-radio>
            <i-radio value="apricot">Apricot</i-radio>
        </i-radio-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Toggle</i-form-label>
        <i-toggle v-model="toggle">I confirm this toggle</i-toggle>
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox</i-form-label>
        <i-checkbox v-model="checkbox">I accept the terms and conditions</i-checkbox>
    </i-form-group>

    <i-form-group>
        <i-button type="submit" :loading="loading">
            Submit
        </i-button>
    </i-form-group>
</i-form>

Disabled State

Setting a form as disabled will cause all of its child inputs to be disabled. When disabled, the form cannot be submitted.

<i-form @submit="onSubmit" disabled>
    <i-form-group>
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Select</i-form-label>
        <i-select v-model="select" :options="options" placeholder="Choose an option" />
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox Group</i-form-label>
        <i-checkbox-group v-model="checkboxGroup">
            <i-checkbox value="apple">Apple</i-checkbox>
            <i-checkbox value="banana">Banana</i-checkbox>
            <i-checkbox value="strawberry">Strawberry</i-checkbox>
            <i-checkbox value="mango">Mango</i-checkbox>
        </i-checkbox-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Radio Group</i-form-label>
        <i-radio-group v-model="radioGroup">
            <i-radio value="coconut">Coconut</i-radio>
            <i-radio value="passionfruit">Passion fruit</i-radio>
            <i-radio value="apricot">Apricot</i-radio>
        </i-radio-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Toggle</i-form-label>
        <i-toggle v-model="toggle">I confirm this toggle</i-toggle>
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox</i-form-label>
        <i-checkbox v-model="checkbox">I accept the terms and conditions</i-checkbox>
    </i-form-group>

    <i-form-group>
        <i-button type="submit" :loading="loading">
            Submit
        </i-button>
    </i-form-group>
</i-form>

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.

<i-form @submit="onSubmit" readonly>
    <i-form-group>
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Select</i-form-label>
        <i-select v-model="select" :options="options" placeholder="Choose an option" />
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox Group</i-form-label>
        <i-checkbox-group v-model="checkboxGroup">
            <i-checkbox value="apple">Apple</i-checkbox>
            <i-checkbox value="banana">Banana</i-checkbox>
            <i-checkbox value="strawberry">Strawberry</i-checkbox>
            <i-checkbox value="mango">Mango</i-checkbox>
        </i-checkbox-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Radio Group</i-form-label>
        <i-radio-group v-model="radioGroup">
            <i-radio value="coconut">Coconut</i-radio>
            <i-radio value="passionfruit">Passion fruit</i-radio>
            <i-radio value="apricot">Apricot</i-radio>
        </i-radio-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Toggle</i-form-label>
        <i-toggle v-model="toggle">I confirm this toggle</i-toggle>
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox</i-form-label>
        <i-checkbox v-model="checkbox">I accept the terms and conditions</i-checkbox>
    </i-form-group>

    <i-form-group>
        <i-button type="submit" :loading="loading">
            Submit
        </i-button>
    </i-form-group>
</i-form>

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.

<i-form @submit="onSubmit" size="sm">
    <i-form-group>
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Select</i-form-label>
        <i-select v-model="select" :options="options" placeholder="Choose an option" />
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox Group</i-form-label>
        <i-checkbox-group v-model="checkboxGroup">
            <i-checkbox value="apple">Apple</i-checkbox>
            <i-checkbox value="banana">Banana</i-checkbox>
            <i-checkbox value="strawberry">Strawberry</i-checkbox>
            <i-checkbox value="mango">Mango</i-checkbox>
        </i-checkbox-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Radio Group</i-form-label>
        <i-radio-group v-model="radioGroup">
            <i-radio value="coconut">Coconut</i-radio>
            <i-radio value="passionfruit">Passion fruit</i-radio>
            <i-radio value="apricot">Apricot</i-radio>
        </i-radio-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Toggle</i-form-label>
        <i-toggle v-model="toggle">I confirm this toggle</i-toggle>
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox</i-form-label>
        <i-checkbox v-model="checkbox">I accept the terms and conditions</i-checkbox>
    </i-form-group>

    <i-form-group>
        <i-button type="submit" :loading="loading">
            Submit
        </i-button>
    </i-form-group>
</i-form>


<i-form @submit="onSubmit" size="md">
    <i-form-group>
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Select</i-form-label>
        <i-select v-model="select" :options="options" placeholder="Choose an option" />
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox Group</i-form-label>
        <i-checkbox-group v-model="checkboxGroup">
            <i-checkbox value="apple">Apple</i-checkbox>
            <i-checkbox value="banana">Banana</i-checkbox>
            <i-checkbox value="strawberry">Strawberry</i-checkbox>
            <i-checkbox value="mango">Mango</i-checkbox>
        </i-checkbox-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Radio Group</i-form-label>
        <i-radio-group v-model="radioGroup">
            <i-radio value="coconut">Coconut</i-radio>
            <i-radio value="passionfruit">Passion fruit</i-radio>
            <i-radio value="apricot">Apricot</i-radio>
        </i-radio-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Toggle</i-form-label>
        <i-toggle v-model="toggle">I confirm this toggle</i-toggle>
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox</i-form-label>
        <i-checkbox v-model="checkbox">I accept the terms and conditions</i-checkbox>
    </i-form-group>

    <i-form-group>
        <i-button type="submit" :loading="loading">
            Submit
        </i-button>
    </i-form-group>
</i-form>


<i-form @submit="onSubmit" size="lg">
    <i-form-group>
        <i-form-label>Input</i-form-label>
        <i-input v-model="input" placeholder="Type something.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Textarea</i-form-label>
        <i-textarea v-model="textarea" placeholder="Write a comment.." />
    </i-form-group>

    <i-form-group>
        <i-form-label>Select</i-form-label>
        <i-select v-model="select" :options="options" placeholder="Choose an option" />
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox Group</i-form-label>
        <i-checkbox-group v-model="checkboxGroup">
            <i-checkbox value="apple">Apple</i-checkbox>
            <i-checkbox value="banana">Banana</i-checkbox>
            <i-checkbox value="strawberry">Strawberry</i-checkbox>
            <i-checkbox value="mango">Mango</i-checkbox>
        </i-checkbox-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Radio Group</i-form-label>
        <i-radio-group v-model="radioGroup">
            <i-radio value="coconut">Coconut</i-radio>
            <i-radio value="passionfruit">Passion fruit</i-radio>
            <i-radio value="apricot">Apricot</i-radio>
        </i-radio-group>
    </i-form-group>

    <i-form-group>
        <i-form-label>Toggle</i-form-label>
        <i-toggle v-model="toggle">I confirm this toggle</i-toggle>
    </i-form-group>

    <i-form-group>
        <i-form-label>Checkbox</i-form-label>
        <i-checkbox v-model="checkbox">I accept the terms and conditions</i-checkbox>
    </i-form-group>

    <i-form-group>
        <i-button type="submit" :loading="loading">
            Submit
        </i-button>
    </i-form-group>
</i-form>

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