Label

Label component used in association mostly with the Text field and Select components.

Quick demo

Preview of label component used with text field on form field.

Helper message.

Go on interactive demo for look this component in action!

Usage

Styles

sass
@use "~@iraiser/biscuit-design-components/components/label/styles";

HTML structure

html
<label class="bdc-label">Label</label>

Theming

See the "Theming" section on theme documentation for more customization options.

Theming with CSS custom properties

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/label";

.foo-button {
    --bdc-theme-surface: #142133;
}

Theming with Sass mixins

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/label";

.foo-label {
    @include label.ink-color(#142133);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-labelMandatory.
bdc-label--requiredStyle label at required.

Sass mixins

Custom your own label easily with the public Sass mixins.

MixinDescription
ink-color($color)Set the ink color.
leadingSet properties with label leading other component.
Menu