Vanilla ComponentsForms
Vanilla components brings together a nice set of form utilities to help you build forms in a breeze. By default, some components already include a Feedback and Label prop, so you dont need to use those But in case you want to use them standalone, you can do so. Including: Labels, Feedback, errors, sections, groups & much more! Lets dive a bit into it.
Form Section
The form section is intended to be used to wrap a group InputGroup or simply inputs, it can also be used as a form to wrap the whole form, so its easier to control. You can check a full example on Form Sections & Groups.
Form section Props 📥
Props available for this component extending the default variant & global props.
| Prop | Description | Accepted Values | Default |
|---|---|---|---|
divided | Divide the items inside the section | Boolean | false |
as | The tag to render this section | String | div |
spaced | Space the items inside the section | Boolean | false |
filled | Darken the area to stand-out | Boolean | false |
Form Input Group
The input group can be used to display a field with his label, and also to display multiple fields inside one label. This components comes with 3 variants out-of-the-box: default, inline & content.
The default variant, is the label on the top and the field on the bottom on a grid style. The inline variant, is the label on the left and the field on the right on a grid style, on mobile fallbacks to default. The content variant, has nothing but just a content centered, left aligned or right aligned.
🏄 Click to expand the code
<script setup lang="ts">
import {
CheckboxGroup,
CountryInput,
FormSection,
InputGroup,
Input as VanillaInput,
Select as VanillaSelect,
} from '@flavorly/vanilla-components'
</script>
<template>
<PreviewWrapper>
<FormSection>
<InputGroup
label="E-mail"
name="email"
variant="inline"
>
<VanillaInput
name="email"
placeholder="Enter your personal email here"
/>
<VanillaSelect
name="email_provider"
placeholder="Whats your e-mail provider?"
:options="[
{ text: 'Gmail', value: 'gmail' },
{ text: 'Yahoo', value: 'yahoo' },
{ text: 'Hey', value: 'hey' },
]"
/>
</InputGroup>
<InputGroup
label="Full name"
name="first_name"
>
<VanillaInput
name="first_name"
placeholder="Your first name"
/>
<VanillaInput
name="last_name"
placeholder="Your Last name"
/>
</InputGroup>
<InputGroup
label="Address"
name="address"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-2">
<VanillaInput
name="address"
placeholder="Ex: Something Road"
/>
<VanillaInput
name="door"
placeholder="N31"
/>
</div>
<div class="grid grid-cols-1">
<VanillaInput
name="city"
placeholder="City. Ex: Porto"
/>
</div>
<div class="grid grid-cols-1">
<CountryInput
name="country"
placeholder="Select your home country"
/>
</div>
</InputGroup>
<InputGroup
label="Skills"
name="skills"
>
<CheckboxGroup
name="skills"
:options="[
{ text: 'Vue', value: 'vue', description: 'Is Vue your stack?' },
{ text: 'React', value: 'react', description: 'React just sucks right?' },
{ text: 'Angular', value: 'angular', description: 'Lets not talk about angular' },
{ text: 'Svelte', value: 'svelte', description: 'Maybe we can try some day' },
{ text: 'Ember', value: 'ember', description: 'Good stuff, but... vue' },
]"
/>
</InputGroup>
<InputGroup
label="Im a content"
variant="content"
align-label="center-center"
>
<span class="text-center text-xs text-gray-500 dark:text-gray-400">You can also include content here with the Input group as "content" variant, this is a great
place to include additional context in-between the forms.
</span>
</InputGroup>
</FormSection>
</PreviewWrapper>
</template>
Form Input Group Props 📥
Props available for this component extending the default variant & global props.
| Prop | Description | Accepted Values | Default |
|---|---|---|---|
errors | Divide the items inside the section | Boolean | false |
feedback | The tag to render this section | String | div |
label | Space the items inside the section | Boolean | false |
name | Darken the area to stand-out | Boolean | false |
showErrors | Darken the area to stand-out | Boolean | false |
showFeedback | Darken the area to stand-out | Boolean | false |
withPadding | Darken the area to stand-out | Boolean | false |
alignLabel | Darken the area to stand-out | Boolean | false |
Label
A label is a simple component that can be used to label a form input.
Label Props 📥
Props available for this component extending the default variant & global props.
| Prop | Description | Accepted Values | Default |
|---|---|---|---|
label | Actual label | string | undefined |
for | The for Label is used to bing the label to a named input | String | undefined |
safe | Allow v-html or v-text | Boolean | false |
Feedback
A feedback to show under a field or element, to provide additional context
Feedback Props 📥
Props available for this component extending the default variant & global props.
| Prop | Description | Accepted Values | Default |
|---|---|---|---|
text | Actual text for the feedback | string | undefined |
safe | Allow v-html or v-text | Boolean | false |
Errors
Specially used to display errors.
Errors Props 📥
Props available for this component extending the default variant & global props.
| Prop | Description | Accepted Values | Default |
|---|---|---|---|
errors | The error string or array of errors | string, Array | undefined |
safe | Allow v-html or v-text | Boolean | false |
Preview & Playground 🖼️
Here you may find a preview of the component, with error & possible variants.
🏄 Click to expand the code
<script setup lang="ts">
import { FormErrors, FormFeedback, FormLabel, Input as VanillaInput } from '@flavorly/vanilla-components'
</script>
<template>
<PreviewWrapper>
<div>
<FormLabel
label="Email"
for="email"
/>
<VanillaInput
type="email"
name="email"
/>
<FormFeedback text="Im a nice feedback here" />
<FormErrors errors="Im the errors! lol" />
</div>
</PreviewWrapper>
</template>