@vuecs/forms

@vuecs/forms

The complete form-input family of vuecs — accessible inputs on Reka UI primitives with a clean v-model contract, validation feedback, and a shared FormOption shape across every picker.

✨ What's inside

• ⌨️ Text & numbers — <VCFormInput>, <VCFormTextarea>, <VCFormNumber> (typed, with steppers), <VCFormPin> (PIN/OTP).
• ✅ Toggles — <VCFormCheckbox> (incl. indeterminate), <VCFormCheckboxGroup>, <VCFormSwitch>, <VCFormRadio> / <VCFormRadioGroup>.
• 📋 Pickers — <VCFormSelect>, <VCFormSelectSearch>, <VCFormTags>, all driven by the same FormOption<T> shape ({ value, label, disabled?, icon?, … }) + FormOptionGroup<T>.
• 🎚️ <VCFormSlider> — single value or range from one component; thumb count derives from the v-model shape.
• 🧪 Validation feedback — wrap any input in <VCFormGroup>: it renders label + messages and folds an error / warning severity onto the input's theme variant automatically, with zero per-input wiring.
• 🌐 i18n-ready defaults — placeholders, labels, and validation copy resolve through @vuecs/core's behavioral-defaults pipeline (reactive MaybeRef values welcome).
• 🚀 useSubmitButton() (experimental) — a reactive bind-object for create/update submit buttons on @vuecs/button.

📦 Installation

npm install @vuecs/forms

⚡ Usage

<VCFormGroup label-content="Email" :validation-messages="errors.email">
    <VCFormInput v-model="form.email" type="email" />
</VCFormGroup>

<VCFormSelect
    v-model="form.role"
    :options="[
        { value: 'admin', label: 'Administrator' },
        { value: 'user', label: 'User' },
    ]"
    placeholder="-- Select a role --"
/>

<VCFormSlider v-model="priceRange" :min="0" :max="500" />  <!-- range: v-model is number[] -->

📚 Documentation

One page per component on vuecs.dev:

Input · Textarea · Number · Pin · Checkbox · Switch · Radio · Select · SelectSearch · Slider · Tags

Guide: Validation feedback

🔄 Migrating from @vuecs/form-controls (≤2.x)

@vuecs/form-controls was renamed to @vuecs/forms in 3.0 — a clean break, no shim:

• VCFormInputCheckbox split into <VCFormCheckbox> / <VCFormCheckboxGroup> / <VCFormSwitch> (distinct ARIA semantics).
• VCFormRangeMultiSlider replaced by <VCFormSlider> (one component, single + range).
• FormSelectOption ({ id, value }) replaced by FormOption<T> ({ value, label, … }); the optionDefault* triplet collapsed into one placeholder prop.
• New Reka-backed components: Radio, Pin, Number, Tags.
• VCFormSubmit decomposed into <VCButton> + useSubmitButton().

License

Made with 💚

Published under Apache 2.0 License.