BundyUI

Forms

Label

FormField

A label/description/error wrapper standardizing the layout around a form control. Inside a `Form`, `name` is what pairs it with a value and pulls in that field's error.

html
<UiFormField />

Label

label is the label above the field. Wired to whatever control you put in the default slot, so clicking it focuses that control.

Description

description sits between the label and the field, for the sentence that frames what's being asked.

Hint

hint sits below the field instead of above it, for the note that only matters once someone is typing. It's hidden while error is set, so the two never stack up under one input.

We'll never share your email.

hint and error occupy the same line: the hint hides while an error is showing rather than stacking, so a field never grows taller the moment it goes wrong.

Error

error takes the hint's place and tints the field. Inside a Form it's filled in for you from the validation result.

Username is already taken.

error and description can both be set; when error is present it's the one shown (they're not stacked).

Works standalone. Outside a Form it's the label/description/hint/error wrapper it always was, with error set by hand — which is how LoginForm and SignupForm still use it.

An explicit error prop beats the one the surrounding form would supply, which is the escape hatch for a message the form has no way to know about.

Name

name sets which value in the surrounding Form's state this field is for. It's how the form matches a validation error back to the field that caused it.

Required

required adds an asterisk to the label. Marking the field is all it does — the rule itself lives on the control or the form.

Wraps any form control

Textarea, NumberInput, Select, Slider — the field is whatever you put in the default slot.

Feedback is required.

Wraps whatever form control you put in its default slot — it doesn't validate anything itself, it just standardizes label/description/error/hint layout around whatever child you give it.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
label
string
—
The label text displayed above the field.
description
string
—
Additional descriptive text displayed below the label.
hint
string
—
Helper text displayed below the field content, hidden when `error` is set.
error
string
—
Error message displayed below the field content instead of `hint`. Inside a `Form` this is usually left unset — the field takes its error from `name` instead. Setting it anyway wins, which is the escape hatch for an error the form doesn't know about.
name
string
—
Which value in the surrounding `Form`'s state this field is for. It's how the form addresses an error back to the right field, so it has to match the key the schema validates — `email`, or `address.city` for a nested one. Outside a `Form` it does nothing.
required
boolean
false
Shows a required-field asterisk next to the label.

Slots

Slot
default

Types

ts
interface FormContext {
    errors: ComputedRef<Record<string, string>>;
    disabled: ComputedRef<boolean>;
}