Misc

Submit button

The submit button has a default text of Submit, but you can pass in a slot as well:

<Submit>Do something!</Submit>

Group component

With the Group component, you can group checkboxes and radio elements. You can use the inline attribute to arrange the children horizontally. Just like other the components, the Group component also supports the error and label attributes.

Most of the time, you don't want to show validation errors on each radio element, so the validation errors are hidden by default on the Radio component. Instead, you can use the Group component to show the error just once.

<Form v-model="settings" :errors="errors">
  <Group name="theme" inline>
    <Radio name="theme" value="dark" label="Dark theme" />
    <Radio name="theme" value="light" label="Light theme" />
  </Group>

  <Group>
    <Checkbox name="newsletter" label="Do you want to receive my newsletter?" />
    <Checkbox name="terms" label="Do you agree with the terms?" />
  </Group>
</Form>

If you want to show the error on the Radio component, you can use the show-error attribute:

<Form v-model="settings" :errors="errors">
  <Group>
    <Radio name="theme" value="dark" label="Dark theme" :show-error="true" />
    <Radio name="theme" value="light" label="Light theme" :show-error="true" />
  </Group>
</Form>

Attribute inheritance

Additional attributes are passed down the form element itself. For example, the placeholder attribute is passed down to the inner input element, not to the Input component's outer div.

<Input v-model="user.name" placeholder="Your name" data-foo="bar" />

Rendered template:

<div>
  <input v-model="..." placeholder="Your name" data-foo="bar" />
</div>