Form Label
Form component used to add text labels to form groups.
Basic Example
You can add a label to your input by grouping an <i-form-label>
and any input component inside an <i-form-group>
.
Required Example
You can add the required
property to a parent form group to add a red asterisk *
to the form label.
Placement
You can add labels to either side of your input, and position it using the optional inline
form group and placement
form label properties.
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.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
for
TypeString
Default''
Description The id of the target input to be focused by the form label. If left empty, clicking the form label will focus the next sibling input - Property
placement
Type'left' | 'right'
Default'left'
Description The placement of the form label - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the form label
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for default form label content
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----font-size
Valuefont-size()
Description The font size of the form label component - Property
----margin-top
Value0
Description The margin top of the form label component - Property
----margin-right
Valuevar(--margin-right)
Description The margin right of the form label component - Property
----margin-bottom
Valuecalc(var(--margin-bottom) / 4)
Description The margin bottom of the form label component - Property
----margin-left
Valuevar(--margin-left)
Description The margin left of the form label component