Usage
Wrap any form component with a FormField. Used in a Form, it provides validation and error handling.
Label
Use the label prop to set the label for the form control.
<template>
<B24FormField label="Email">
<B24Input placeholder="Enter your email" />
</B24FormField>
</template>
for attribute and the form control are associated with a unique id if not provided.When using the required prop, an asterisk is added next to the label.
<template>
<B24FormField label="Email" required>
<B24Input placeholder="Enter your email" />
</B24FormField>
</template>
Description
Use the description prop to provide additional information below the label.
We'll never share your email with anyone else.
<template>
<B24FormField label="Email" description="We'll never share your email with anyone else.">
<B24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>
Hint
Use the hint prop to display a hint message next to the label.
<template>
<B24FormField label="Email" hint="Optional">
<B24Input placeholder="Enter your email" />
</B24FormField>
</template>
Help
Use the help prop to display a help message below the form control.
<template>
<B24FormField label="Email" help="Please enter a valid email address.">
<B24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>
Error
Use the error prop to display an error message below the form control. When used together with the help prop, the error prop takes precedence.
When used inside a Form, this is automatically set when a validation error occurs.
<template>
<B24FormField label="Email" error="Please enter a valid email address.">
<b24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>
Error pattern
Use the error-pattern prop to match form errors with a regular expression. This is especially relevant for components with array values such as InputTags, where errors include array indices in their name (e.g. tags.0).
Size
Use the size prop to change the size of the FormField, the size is proxied to the form control.
We'll never share your email with anyone else.
<template>
<B24FormField
label="Email"
description="We'll never share your email with anyone else."
hint="Optional"
help="Please enter a valid email address."
size="lg"
>
<B24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>
Orientation
Use the orientation prop to change the layout of the FormField. Defaults to vertical.
<template>
<B24FormField
orientation="horizontal"
label="Email"
help="Please enter a valid email address."
class="w-72"
>
<B24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>
API
Props
Slots
Theme
export default {
slots: {
root: 'font-[family-name:var(--ui-font-family-system)] font-(--ui-font-weight-regular)',
wrapper: 'leading-(--ui-font-line-height-reset)',
labelWrapper: 'flex content-center items-center justify-between gap-1',
label: 'block text-label',
hint: 'text-description',
container: 'relative',
description: 'leading-(--ui-font-line-height-2xs) text-description',
error: 'text-(--ui-color-accent-main-alert)',
errorWrapper: 'flex flex-row flex-nowrap items-center gap-0.5',
errorIcon: 'size-4.5',
help: 'leading-(--ui-font-line-height-2xs) italic text-description'
},
variants: {
useDescription: {
true: {
wrapper: ''
},
false: {
wrapper: ''
}
},
size: {
xs: {
root: 'text-(length:--ui-font-size-xs)',
errorIcon: 'size-[16px]'
},
sm: {
root: 'text-(length:--ui-font-size-xs)',
errorIcon: 'size-[16px]'
},
md: {
root: 'text-(length:--ui-font-size-sm)',
errorIcon: 'size-4.5'
},
lg: {
root: 'text-(length:--ui-font-size-md)'
}
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
}
},
orientation: {
vertical: {
container: '',
description: 'mt-[2px]',
error: 'mt-[4px]',
errorIcon: 'mt-[2px]',
help: 'mt-[6px]'
},
horizontal: {
root: 'flex justify-between place-items-baseline gap-2'
}
}
},
compoundVariants: [
{
useDescription: true,
orientation: 'vertical',
class: {
wrapper: 'mb-[6px]'
}
},
{
useDescription: false,
orientation: 'vertical',
class: {
wrapper: 'mb-[10px]'
}
},
{
orientation: 'horizontal',
class: {
wrapper: ''
}
}
],
defaultVariants: {
size: 'md'
}
}