Label is a component used to provide a name or title for form elements.
It supports both standard and floating label styles for enhanced form usability.
Label pairs with the Input component. See the Input examples.
Label is a standalone component.
The Label component provides a name or title for form elements. It supports both standard and floating label styles for enhanced form usability.
| Label Props | Type | Description |
|---|---|---|
is | string | Allows changing the element tag. Default is |
floating | boolean | When true, applies the floating label style. This creates a label that floats above the input when it has content or is focused. |
input | boolean | When true, styles the label with input-like classes (for input groups, etc). If an Input component is nested inside, it will automatically remove its own input styling to avoid duplication. |
select | boolean | When true, styles the label with select-like classes (for select groups, etc). If a Select component is nested inside, it will automatically remove its own select styling to avoid duplication. |
toggle | boolean | When true, styles the label for use with a Toggle component. Applies toggle-related classes and color logic. input
,
select
, or
toggle
is set.
|
join | boolean | When true and |
color | string | Sets the color style. Accepts |
| neutral | boolean | Sets the color to neutral (applies to input, select, or toggle styles). |
| primary | boolean | Sets the color to primary. |
| secondary | boolean | Sets the color to secondary. |
| accent | boolean | Sets the color to accent. |
| info | boolean | Sets the color to info. |
| success | boolean | Sets the color to success. |
| warning | boolean | Sets the color to warning. |
| error | boolean | Sets the color to error. |
ghost | boolean | Applies the ghost (transparent) style. Used with input, select, or toggle. |
size | string | Sets the size of the label and associated control. Accepts |
| xl | boolean | Sets size to xl. |
| lg | boolean | Sets size to lg. |
| md | boolean | Sets size to md. |
| sm | boolean | Sets size to sm. |
| xs | boolean | Sets size to xs. |
| Label Slots | Description |
|---|---|
default | The default slot. Place the label text and associated form element here. If using with input/select/toggle, place the form element inside the slot as well. |
A label with a text span and a date input.
A floating label for an input.
Floating labels cannot have content inside them. Use a Join component instead.
Floating labels with different input sizes.
A label with an input at the end.
A label with text and an input.
A label styled to look like a toggle.
Note: You may need to custom size the icons to center them. See the next example.
A label styled to look like a toggle with custom icons and xl size. This example sets a custom size on the icons to properly position them in the center of the toggle circle.