Forms
Barebones includes simple base styles for common form elements. These styles provide a consistent starting point for inputs, selects, textareas, disabled fields and basic form layout. Project-specific form styling can be layered on top as needed.
Form elements
Inputs, selects, and textareas share a simple baseline. This makes standard fields full width by default and keeps their spacing tied to the theme spacing scale.
input,
select,
textarea {
background-color: map.get($colors, 'background');
border: solid 1px map.get($colors, 'base');
border-radius: 0;
color: map.get($colors, 'base');
line-height: $base-spacing-unit * 1.5;
height: $base-spacing-unit * 1.5;
padding: 0 #{$base-spacing-unit * 0.5};
width: 100%;
}Checkboxes and radios
Checkboxes and radio buttons are reset separately. This prevents them from inheriting the full-width input styling.
input[type="checkbox"],
input[type="radio"] {
background: transparent;
border: 0;
line-height: normal;
height: auto;
width: auto;
}input[type="file"] {
line-height: normal;
height: auto;
padding: #{$base-spacing-unit * 0.25} #{$base-spacing-unit * 0.5};
}Textareas
Textareas are given a minimum height and can be resized vertically.
textarea {
min-height: $base-spacing-unit * 4;
overflow: auto;
vertical-align: top;
resize: vertical;
}Disabled fields
Disabled inputs receive a muted background and disabled cursor.
input[disabled] {
background-color: whitesmoke;
cursor: not-allowed;
}Focus styles
Barebones removes the default focus outline. Projects should add their own accessible focus styles when defining final form and button designs.
*:focus {
outline: 0;
}Form groups
The .form class provides a simple grouped field structure. Each .form__group is displayed as a block and receives bottom margin.
Labels inside form groups are displayed as blocks with spacing below. This is useful for compact search forms or simple filter controls.
<form class="form">
<div class="form__group">
<label class="form__label" for="email">Email address</label>
<input id="email" type="email">
</div>
</form>Inline forms
The .form class provides a simple grouped field structure. Each .form__group is displayed as a block and receives bottom margin.
Labels inside form groups are displayed as blocks with spacing below. This is useful for compact search forms or simple filter controls.
<form class="form form--inline">
<div class="form__group">
<label class="form__label" for="email">Email address</label>
<input id="email" type="email">
</div>
</form>