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>.

<i-form-group>
    <i-form-label>Input Label Default</i-form-label>
    <i-input v-model="value" placeholder="Type something.." />
</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.

<i-form-group required>
    <i-form-label>Input Label Required</i-form-label>
    <i-input v-model="value" placeholder="Type something.." />
</i-form-group>

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.

<i-form-group>
    <i-form-label>Input Label Default</i-form-label>
    <i-input v-model="value" placeholder="Type something.." />
</i-form-group>

<i-form-group inline>
    <i-form-label placement="left">Input Label Left</i-form-label>
    <i-input v-model="value" placeholder="Type something.." />
</i-form-group>

<i-form-group inline>
    <i-form-label placement="right">Input Label Right</i-form-label>
    <i-input v-model="value" placeholder="Type something.." />
</i-form-group>

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.

<i-form-group>
    <i-form-label size="sm">Input</i-form-label>
    <i-input v-model="input" placeholder="Type something.." />
</i-form-group>

<i-form-group>
    <i-form-label size="md">Input</i-form-label>
    <i-input v-model="input" placeholder="Type something.." />
</i-form-group>

<i-form-group>
    <i-form-label size="lg">Input</i-form-label>
    <i-input v-model="input" placeholder="Type something.." />
</i-form-group>

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