Label

Basic label

Labels are created with the .bf-label class. When creating inputs, always include a readable label, preferably through a visible, connected <label> element.

<label class="bf-label">Basic label</label>

Required / optional

When inputs are required or optional, you can indicate this in the label by adding an inner element with the class .bf-label-required.

<label class="bf-label">
  Label
  <span class="bf-label-required">(required)</span>
</label>
<label class="bf-label">
  Label
  <span class="bf-label-required">(optional)</span>
</label>

Read only

When inputs are read only, the associated label should have a "lock" icon.

<label class="bf-label">
  Read only
  <i class="fa-solid fa-lock bfc-disabled"></i>
</label>

Disabled

When inputs are disabled, the associated label should have the class .bf-label-disabled and a lock icon.

<label class="bf-label bf-label-disabled">
  Disabled
  <i class="fa-solid fa-lock"></i>
</label>