ow-vue-form-ui-kit

OrangeVue Form UI kit

A completely free simple UI form components for Vue 3 based entirely on Tailwind CSS. It includes:

• Input
• Button
• Dropdown
• Radio
• Checkbox

Features

• Light/dark mode
• Three styles for inputs and dropdows: linear, rounded and pill
• Four styles for buttons: linear, rounded, pill and outline (with or without icons)
• Components are styled and set with props

Demo

Demo

Requirements

Vue 3.x, Font Awesome, Tailwind CSS 3.x and Tailwind CSS Form Plugin (see Acknowledgements)

Installation

npm i ow-vue-form-ui-kit`

Usage

After installation, import the component in your .vue file:

<template>
<div>
    <Input
        type="tel"
        v-model="data.inputValue"
        label="City"
        id="fb-link1"
        shape="linear"
        placeholder="This is a placeholder"
        errorMsg="This is an error message"
        :charsCounter="10"
        icon="fa-solid fa-check"
    />

    <Button
        text="Rounded"
        shape="rounded"
        mainColor="secondary"
    />

    <Select
        label="City"
        v-model="data.dropdownValue"
        :options="cities"
        defaultOption="Select city"
        shape="rounded"
        errorMsg="This is an error message"
    />
    
    <Radio
        v-for="city, id in cities"
        :label="city"
        :id="'city-' + id"
        name="city"
        v-model:checked="data.radioValue"
        :value="city"
        subLabel="Text under label"
    />

    <Checkbox
        v-for="city, id in cities"
        :label="city" :id="'city-2-' + id"
        name="city"
        v-model:checked="data.checkboxValues"
        :value="city"
        subLabel="Text under label"
    />
</div>
</template>

<script setup>
import { reactive } from 'vue';
import { Input, Checkbox } from 'ow-vue-form-ui-kit';

const data = reactive({
    inputValue: 'Milano',
    dropdownValue: 'Milano',
    radioValue: 'Torino',
    checkboxValues: ['Torino', 'Firenze'],
});

const cities = ['Milano', 'Roma', 'Firenze', 'Torino', 'Bologna'];
</script>

Props Reference

Inputs

Props	Type	Default	Values	Description
shape	String	linear	linear, rounded, pill	Input shape.
type	String	linear	text, url, email, password, tel, search	Input type.
label	String	null	Any string	Input label content.
name	String	linear	Any string	Input name attribute.
mainColor	String	neutral1	One of the twelve predefined colors	Input border in normal state.
focusColor	String	primary	One of the twelve predefined colors	Input border and background in focus state.
placeholder	String	null	Any string	Content of input placeholder. If shape="linear", placeholder will not display; the label is used instead.
id	String	linear	Any string	Input id attribute.
min, max, step	Number	0, 100, 1	Any number	Used in inpup type="number" to define min, max and step value acceptable.
autocomplete	String	on	on, off	Input autocomplete attribute, turn it on or off.
autofocus	Boolean	false	true, false	Input autofocus attribute, turn it on or off.
icon	String	null	Font Awesome classes	Specify family and icon, i.e.: fa-solid fa-check
iconColor	String	text-success	Any Tailwind CSS class	Could be one of predefined colors or any text-* Tailwind class, even in the form text-[#ff0000]
required	Boolean	false	true, false	Input required attribute.
errorMsg	String	null	Any string	An error message to display.
disabled	Boolean	linear	true, false	Input disabled attribute.
charsCounter	Number	null	Any integer	Enable the chars input count (spaces included) and it turns red when input length is grater than the set value`
pattern	String	null	JavaScript regular expression	Input pattern attribute.

Buttons

Props	Type	Default	Values	Description
shape	String	squared	squared, rounded, pill	Button shape.
outline	Boolean	false	true, false	Set button with just border and pale background.`
mainColor	String	primary	One of the twelve predefined colors	Button color.`
type	String	button	button, submit, reset	Button type attribute.
text	String	null	Any string	Button text content.
textColor	String	text-white	Any Tailwind CSS class	Could be one of predefined colors or any text-* Tailwind class, even in the form text-[#ff0000]
textColorOutline	String	text-gray-700 dark:text-white`	Any Tailwind CSS class	Could be one of predefined colors or any text-* Tailwind class, even in the form text-[#ff0000]`
disabled	Boolean	false	true, false	Button disabled attribute.
icon	String	null	Font Awesome classes	Specify family and icon, i.e.: fa-solid fa-check

Dropdowns

Props	Type	Default	Values	Description
shape	String	linear	linear, rounded, pill	Dropdown shape.
options	Array	[]	An array of strings or numbers	An array of strings or numbers; arrays of objects will not work.
label	String	null	Any string	Dropdown label content.
name	String	linear	Any string	Dropdown name attribute.
mainColor	String	neutral1	One of the twelve predefined colors	Dropdown border in normal state.
focusColor	String	primary	One of the twelve predefined colors	Dropdown border and background in focus state.
listColor	String	neutral2	One of the twelve predefined colors	Dropdown list background color.
defaultOption	String	null	Any string`	`Content of dropdown default option that is the one when no value is selected.
id	String	linear	Any string	Dropdown id attribute.
errorMsg	String	null	Any string	An error message to display.
disabled	Boolean	linear	true, false	`Dropdown disabled attribute.

Radios and checkboxes

Props	Type	Default	Values	Description
value	String, Number	null	Any string, any number	Input radio or checkbox value.
checked
(for checkboxes)	Array	null	An array of strings or numbers	To be used in the form v-model:checked="["a", "b", "c"]" to determine the checked value; can be an array of strings or numbers; arrays of objects will not work.
checked
(for radios)	String, Number	null	Any string, any number	To be used in the form v-model:checked="data.myValue" to determine the checked value.
subLabel	String	null	Any string	Text displayed under the label.
id	String	null	Any string	Input id attribute.
mainColor	String	primary	One of the twelve predefined colors	Element color in all states.
name	String	null	Any string	Input name attribute.

Default color Reference

Light mode

Color	Hex
primary	#ff6600
secondary	#6366f1
tertiary	#06b6d4
quaternary	#ec4899
neutral1	#6b7280
neutral2	#cbd5e1
label	#94a3b8
placeholder	#94a3b8
info	#3b82f6
success	#22c55e
warning	#f59e0b
danger	#ef4444

Dark mode

Color	Hex
primaryDark	#ea580c
secondaryDark	#4f46e5
tertiaryDark	#0891b2
quaternaryDark	#be185d
neutral1Dark	#737373
neutral2Dark	#1e293b
labelDark	#94a3b8
placeholderDark	#9ca3af
infoDark	#2563eb
successDark	#047857
warningDark	#d97706
dangerDark	#b91c1c

Acknowledgements

• Install Vue 3
• Install Tailwind CSS
• Tailwind CSS Form Plugin
• Tailwind CSS dark mode
• Font Awesome

Author

• OrangeWeb