Form Label

Form component used to add text labels to inputs.

Example

You can add a label to your input by grouping an <i-form-label> and any input component inside an <i-form-group>.

Basic Form Label

Position

You can add labels to either side of your input, and position it using the optional inline and placement properties.

Form Label Position

Size

You're able to use the size property to control the size of your form labels, using one of the available sizes: sm, md, and lg. The default size is set to md. Setting the size on a <i-form-group> will also affect form labels.

Form Label Size

Component API

Here you can find a list of the various customization options you can use for the form label components as props, as well as available slots.

Form Label API
Property placement
Type String
Accepted left, default, right
Default default
Description Sets the placement of the form label component.
Property size
Type String
Accepted sm, md, lg
Default md
Description Sets the size of the form label component.

Sass Variables

Here you can find a list of the Sass variables you can use for the form label component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Form Label
Property $label-margin-base
Default $spacer-1-4 $spacer
Property $label-margin
Default size-map($label-margin-base, $sizes, $size-multipliers)
Property $label-font-size
Default $font-size