Foundation CSS Label

The Label component in Foundation CSS provides a simple and versatile way to add labels to various elements in your web page, such as form inputs, buttons, or other UI elements. Labels improve accessibility and enhance the user experience by providing context or instructions. Here's how you can use the Label component:

1. Basic Label

To create a basic label, use the <label> element and specify the text content of the label. You can associate the label with a form input using the for attribute and the ID of the input element.

Example markup:

<label for="username">Username:</label>
<input type="text" id="username">

This will create a label "Username:" associated with a text input field.

2. Inline Label

You can display labels inline with the associated form controls by wrapping both the label and input elements inside a <div> or <span> element and applying CSS styles for inline display.

Example markup:

<div class="inline-label">
    <label for="email">Email:</label>
    <input type="email" id="email">
</div>

This will display the label "Email:" inline with the email input field.

3. Styling Labels

You can style labels using Foundation CSS classes or custom CSS to match the design of your web page. Foundation CSS provides classes for styling labels, such as .label, .secondary, .success, .alert, and .warning, which apply different colors and styles to labels.

Example markup:

<label class="label secondary">Secondary Label</label>

This will create a secondary label with a different color.

4. Customizing Label Styles

If you need more customization, you can define custom CSS styles for labels to change their appearance, such as font size, color, or alignment. You can use CSS properties like font-size, color, text-align, and others to customize label styles.

Example CSS:

label {
    font-size: 16px;
    color: #333;
    }

This CSS will set the font size to 16 pixels and the text color to dark gray for all labels.

Conclusion

The Label component in Foundation CSS offers a flexible and convenient way to add labels to form inputs and other elements in your web page. Whether you need basic labels, inline labels, or custom-styled labels, Foundation CSS provides the tools and flexibility to meet your design requirements and improve the user experience.

Archive