Label
Stand-alone input field label
Label
Go to top
Also see /react/label
React component
Also see /css/input
Input component
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.
HTML
<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.
HTML
<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.
HTML
<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.
HTML
<label class="bf-label bf-label-disabled">
Disabled
<i class="fa-solid fa-lock"></i>
</label>Sandbox
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css"> <link rel="stylesheet" href="styles.css"> <div class="bf-page-padding bfl-grid" style="justify-items: start"> <label class="bf-label">Basic label</label> <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> <label class="bf-label"> Read only <i class="fa-solid fa-lock bfc-disabled"></i> </label> <label class="bf-label bf-label-disabled"> Disabled <i class="fa-solid fa-lock"></i> </label> </div>