Label
Form control labels. Associates text with inputs via htmlFor or wrapping.
Default
Base
| Class | Description |
|---|---|
.ui-label | Base class |
Size
| Class | Value |
|---|---|
.ui-label--lg | lg |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-label-font-size |
var(--ui-font-size-sm) |
Font size |
--ui-label-color |
var(--ui-color-text) |
Text color |
--ui-label-required-color |
var(--ui-color-danger) |
Required color |
--ui-label-font-size-lg |
var(--ui-font-size-md) |
Font size at large size |
Required
<label class="ui-label" for="input2">
Email address
<span class="ui-label__required">*</span>
</label>Optional
<label class="ui-label" for="input3">
Phone number
<span class="ui-label__optional">(optional)</span>
</label>Sizes
<label class="ui-label">Default size</label>
<label class="ui-label ui-label--lg">Large size</label>Disabled
<label class="ui-label" aria-disabled="true">Disabled label</label>