Components

Thirteen components, each one a thin layer over a native element. Every one of them forwards $attrs, so any HTML attribute keeps working exactly as it does in plain markup.

Form controls

Component	Renders	What it adds
Input	<input>	Generated id, label linking, v-model modifiers
Textarea	<textarea>	Same, on a multiline control
Select	<select>	Options from markup, from data, or both
Checkbox	<input checkbox>	Boolean or array models, and the indeterminate DOM property
CheckboxGroup	<fieldset>	One array model, and an opt-in name, across every checkbox
Radio	<input radio>	Value of any type, shared name when grouped
RadioGroup	<fieldset>	One model and one shared name across every radio
File	<input file>	A v-model that works, resets included
Button	<button> or as	Safe type="button" default, polymorphic tag

Grouping and structure

Component	Renders	What it adds
Field	<div>	One id shared by the label, the control and its hints
Label	<label>	A for it resolves on its own
SupportingText	<p>	Hint or error text, referenced by aria-describedby
Form	<form>	No page reload, opt-in native validation

Where to start

Most forms are three components deep:

<CForm validate @submit="onSubmit">
    <CField>
        <CLabel>Email</CLabel>
        <CInput v-model="email" type="email" required/>
        <CSupportingText validation>We never share your email.</CSupportingText>
    </CField>

    <CButton type="submit">Subscribe</CButton>
</CForm>

Read Field for the id wiring, then Native validation for the rest.