Huesos
Style
Guide

Repositoire

GitHub

Preview

Form Item: Label Top

General block-level wrapper for form elements. Guarantees correct spacing, label and input vertical alignment and provides several helper classes for quick customization.

It also provides several variations for different styling of items.

  • .form-item--required - Marks the label with a red asterisk
  • .form-item--col - Stacks elements instead of displaying them side by side
  • .form-item--label-inside - Visually puts the label inside of the input. Only makes sense if the border strategy is full

Most of these classes can be stacked:

  • .form-item--label-inside.form-item--required - .form-item--required can be combinated with the other modifiers
  • .form-item--label-inside.form-item--col - You can sum coland required to get this commonly seen pattern

Labels

Labels are formatted according to values from $label-as-minititle and $label-font-size. The size will be respected, and minititle will be applied if the boolean value is set to true.

By default, we consider labels as a kind of minititle.

There’s life outside form items
This wrapper is a handy way of scoping a set of form-like styles. You can freely use form elements outside a .form-item wrapper and they will default to normal behavior (i.e, labels will cease to be minititles). This way, you can easily decide wether to apply form-like styles or not to your HTML.

Example

<div class="form-item form-item--label-top">
    <label for="text">A Label inside form item</label>
    <input type="text" id="text" name="text">
</div>

Assets

  • Filesystem Path: src/components/forms/form-item/_form-item.scss
  • Size: 1.2 KB 
  • .form-item {
	margin-bottom : $gutter;
	display:flex;
	align-items: center;
	label {
		flex: 0 1 auto;
		@if $label-as-minititle {
			@include minititle($label-font-size)
		} @else {
			@include ritmo-font-size($label-font-size)
		}
	}
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="url"],
	input[type="tel"],
	input[type="search"] {
		flex: 1 0 auto;
	}
	// Radio and checkbox won't use align-items : baseline
	input[type="checkbox"],
	input[type="radio"] {
		align-self: center;
	}

	&:last-child,
	&:last-of-type {
		margin-bottom:0;
	}
}

.form-item--col {
	display:block;
	label, 
	input,
	textarea {
		display:block;
		width:100%;
	}
	// Except radios and checkboxes!
	input[type="checkbox"],
	input[type="radio"] {
        width:auto;
    }
}

.form-item--required {
	label::after {
		content: "*";
		color: get-color(state, error);
	}
}

.form-item--label-inside {
	border-radius: $form-border-radius;
	@include form-border($input-border-strategy);
	input,
	textarea {
		border:none;
		border-radius:0;
		padding:0;
	}
}

.form-item--label-top {
	align-items: flex-start;
}

.form-item--label-bottom {
	align-items: flex-end;
}