✨ Welcome Summer Sale! Get all templates for $79 (40% Off) ✨
Cruip CSS

Label

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

While radio and checkbox buttons are always labeled, some developers don’t use any label for their input, textarea and select elements, preferring a placeholder instead.

It’s always a good practice to label a control, but if you don’t want to display it, just use the .screen-reader class like in the example below πŸ‘‡

Label component

<!-- With label -->
<label for="username" class="form-label">Username</label>
<input id="username" type="text" class="form-input" placeholder="Username">

<!-- Hidden label -->
<label for="username" class="form-label screen-reader">Username</label>
<input id="username" type="text" class="form-input" placeholder="Username">

For React and Vue templates we have provided a label component imported by default into the input and select components, and it can be handled via props.

<!-- With label -->
<Input id="username" type="text" placeholder="Username" label="Username" />

<!-- Hidden label -->
<Input id="username" type="text" placeholder="Username" label="Username" labelHidden />
<!-- With label -->
<c-input id="username" type="text" placeholder="Username" label="Username" />

<!-- Hidden label -->
<c-input id="username" type="text" placeholder="Username" label="Username" label-hidden />

TL;DR

List of available HTML classes

ClassDescription
.form-labelRequired to make a label fit the template style

React and Vue props

Props for labels are:

  • label – Defines the label content
  • labelHidden (React), label-hidden (Vue) – Boolean prop to hide the label

Check out the input and select props lists to know more.


Theming

Style is defined into 3 files:

πŸ“‹ Core file

src/assets/scss/core/elements/_forms.scss
πŸ‘†πŸš«Β Don’t edit this file!

πŸ“‹ Settings file

src/assets/scss/settings/elements/_buttons-and-forms.scss
πŸ‘† Use this to adjust Sass variables

πŸ“‹ Theme file

src/assets/scss/theme/elements/_forms.scss
πŸ‘† Use this to add custom CSS

Learn more about the Sass logic behind each template.
Last updated on August 17, 2021