Form Components

import { Button, Input, Select, Checkbox, Toggle, Radio, Textarea, Password, Pin, Range, DatePicker, ColorPicker, Editor, RichTextEditor, FileUpload } from '@artisanpack-ui/vue/form';

<Button color="primary" @click="save">Save</Button>
<Button link="/about" external>Learn More</Button>
<Button :loading="submitting" color="success">Submit</Button>

<Input label="Email" type="email" v-model="email" />
<Input label="Search" v-model="search" clearable inline />

<Select label="Country" v-model="country" :options="countries" option-value="id" option-label="name" />

<Checkbox label="I agree to the terms" v-model="agreed" color="primary" />
<Checkbox label="Premium" v-model="isPremium" card />

<Toggle label="Notifications" v-model="notificationsEnabled" color="success" />

<Radio label="Plan" v-model="plan" :options="plans" option-value="id" option-label="name" />
<Radio v-model="size" :options="sizes" card />

<Textarea label="Description" v-model="description" rows="5" />

<Password label="Password" v-model="password" />
<Password label="Confirm" v-model="confirm" hide-toggle />

<Pin :length="6" v-model="code" numeric />
<Pin :length="4" v-model="pin" hide />

<Range label="Volume" v-model="volume" :min="0" :max="100" color="primary" />

<DatePicker label="Start Date" v-model="startDate" />
<DatePicker label="Time" v-model="time" date-type="time" />

<ColorPicker label="Brand Color" v-model="brandColor" clearable random />

<Editor label="JSON Config" v-model="config" :rows="15" />

<RichTextEditor label="Content" v-model="body" />

<FileUpload label="Avatar" accept="image/*" v-model="file" />
<FileUpload label="Documents" with-drag-drop multiple :progress="uploadProgress" />