BundyUI

Forms

Label

A styled label/legend with an optional description and required asterisk, rendered as whichever tag fits the context — used internally by `FormField`, `Checkbox`, `Radio`, `Switch`, `CheckboxGroup`, and `RadioGroup`, but usable on its own for a custom field layout.

vue
<UiLabel />

Options

One block per prop — what it does, and what it looks like set.

Tag

tag is label by default. Switch it when the surrounding markup needs something else — a legend inside a fieldset, or a div where a real label would steal a click from the control beneath it.

Rendered as a legend
Rendered as a div
Rendered as a span

Description

description is secondary text below the label, for the sentence that would clutter the label itself.

Required

required adds a trailing asterisk. Marking the field is all it does — the validation lives on the control.

Label color

labelColor sets the label's text token — base by default. Checkbox and Radio cards drop an unchecked option's label to toned.

Description color

descriptionColor sets the description's text token — muted by default. Checkbox and Radio cards lift the checked option's description to toned.

Examples

The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.

Default slot

The label text itself.

This is what every other form component renders internally

FormField, Checkbox, Radio, Switch, CheckboxGroup, and RadioGroup all forward their own label/legend, description, and required props straight to this component (with the tag that fits their own markup) — reach for Label directly only when you need a custom layout none of them support.

API Reference

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

Props

Prop
Type
Default
Description
tag
"label" | "legend" | "div" | "span"
'label'
The tag to render the Label as — `label` for a standalone form field, `legend` inside a `fieldset`, or `div`/`span` when nested inside another element that's already a `<label>` (e.g. `Checkbox`, `Switch`).
description
string
—
Additional descriptive text displayed below the label.
required
boolean
false
Shows a required-field asterisk after the label text.
labelColor
"base" | "toned" | "muted" | "dimmed"
'base'
Text color of the label, from the preset's text tokens. `Checkbox` and `Radio` cards use it to dim the label of an unchecked option.
descriptionColor
"base" | "toned" | "muted" | "dimmed"
'muted'
Text color of the description, from the preset's text tokens. `Checkbox` and `Radio` cards use it to lift the description of the checked option.

Slots

Slot
default

Types

ts
type TextColor = "base" | "toned" | "muted" | "dimmed";