Components
Inputs
Collect user input with text, select, checkbox, radio, range, file, and color inputs.
All Colorffy form inputs share a common base — label, placeholder, disabled, required, readonly, errorMessages, variant, size, hideLabel — and bind with v-model.
Text and textarea
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('')
const bio = ref('')
</script>
<template>
<UiInputText v-model="name" label="Name" placeholder="Jane Doe" required />
<UiInputTextarea v-model="bio" label="Bio" :rows="4" />
</template>
Select
options accepts an array; map labels / values with optionLabel / optionValue:
<script setup lang="ts">
import { ref } from 'vue'
const role = ref(null)
const options = [
{ name: 'Admin', value: 'admin' },
{ name: 'User', value: 'user' },
]
</script>
<template>
<UiInputSelect
v-model="role"
:options="options"
option-label="name"
option-value="value"
label="Role"
/>
</template>
Checkbox, switch, and radio
<template>
<UiInputCheck v-model="agree" label="I agree to the terms" required />
<UiInputCheck v-model="dark" label="Dark mode" variant="switch" />
<UiInputRadio v-model="plan" :options="plans" option-label="name" option-value="id" inline />
</template>
Range, file, color, and phone
UiInputColorPicker emits onUpdate (not update:modelValue), so bind it with :model-value + @on-update:
<template>
<UiInputRange v-model="volume" :min="0" :max="100" :step="5" label="Volume" />
<UiInputFile v-model="file" label="Upload" input-label="Choose a file" />
<UiInputPhoneNumber v-model="phone" label="Phone" />
<UiInputColorPicker :model-value="color" label="Brand color" @on-update="color = $event" />
</template>
Shared base props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | null | — | Field label. |
placeholder | string | null | — | Placeholder text. |
errorMessages | string[] | — | Validation messages shown below the field. |
variant | 'filled' | 'outline' | 'transparent' | null | — | Visual style. |
size | 'sm' | 'lg' | null | — | Field size. |
disabled / required / readonly / rounded | boolean | false | Field states. |
hideLabel | boolean | false | Visually hide the label. |
Per-input highlights
| Component | Notable props | v-model type |
|---|---|---|
UiInputText | type, maxlength, min, max, autofocus | string | number | null |
UiInputTextarea | rows, cols, resize | string | null |
UiInputSelect | options, optionLabel, optionValue | string | number | object | null |
UiInputRadio | options, optionLabel, optionValue, inline | string | number | null |
UiInputRange | min, max, step | string | number | null |
UiInputCheck | variant: 'switch', label (required) | string | boolean | null |
UiInputFile | inputLabel, large | File | null |
UiInputColorPicker | maxLength, hideLabel (@on-update) | string | null |
UiInputPhoneNumber | maxlength, autofocus | string | null |
Most inputs emit both
update:modelValue (for v-model) and an onUpdate convenience event with the same payload.