Form Group
Display a label and additional informations around a form element.
Usage
Use the FormGroup component around an Input, Textarea, Select or a SelectMenu with the name prop to automatically associate a <label> element with the form element.
vue
<template>
<s-form-group name="email" label="Email">
<s-input placeholder="you@example.com" icon="icon-[heroicons--envelope]"/>
</s-form-group>
</template>Required
Use the required prop to indicate that the form element is required.
vue
<template>
<s-form-group label="Email" required>
<s-input placeholder="you@example.com" icon="icon-[heroicons--envelope]" />
</s-form-group>
</template>Description
Use the description prop to display a description below the label.
We'll only use this for spam.
vue
<template>
<div>
<s-form-group label="Email" description="We'll only use this for spam.">
<s-input placeholder="you@example.com" icon="icon-[heroicons--envelope]" />
</s-form-group>
</div>
</template>Hint
Use the hint prop to display a hint above the form element.
Optional
vue
<template>
<s-form-group label="Email" hint="Optional">
<s-input placeholder="you@example.com" icon="icon-[heroicons--envelope]" />
</s-form-group>
</template>Help
Use the help prop to display an help message below the form element.
We will never share your email with anyone else.
vue
<template>
<s-form-group label="Email" help="We will never share your email with anyone else.">
<s-input placeholder="you@example.com" icon="icon-[heroicons--envelope]" />
</s-form-group>
</template>Error
Use the error prop to display an error message below the form element.
When used together with the help prop, the error prop will take precedence.
You must enter an email
vue
<script setup lang="ts">
import {ref} from 'vue';
const email = ref('')
</script>
<template>
<s-form-group v-slot="{ error }" label="Email" :error="!email && 'You must enter an email'"
help="This is a nice email!" error>
<s-input v-model="email" type="email" placeholder="Enter email"
:trailing-icon="error && 'icon-[heroicons--exclamation-triangle-20-solid]'"/>
</s-form-group>
</template>