Use the .form-label
class to get default margins, layout and styling for form labels. BuzzFeed labels are always written in sentence case. Additionally, use the .form-label--required
class around an asterisk to declare a field required. If a field needs to be marked as optional, wrap "(optional)" in .form-label--optional
.
<form>
<label class="form-label">Add your website</label>
<label class="form-label">Add your website <span class="form-label--required">*</span></label>
<label class="form-label">What is your phone number? <span class="form-label--optional">(optional)</span></label>
</form>
Use the .text-input
class to get default styling for text inputs. BuzzFeed text inputs are always paired with a label to give users context. Placeholder text is used for additional context when necessary.
<form>
<label class="form-label">Add your website</label>
<input type="text" class="text-input" placeholder="www.example.com">
</form>
When necessary, place additional helper text beneath inputs in a label
with a .form-helper
class.
<form>
<label class="form-label">Add your website</label>
<input type="text" class="text-input" placeholder="www.example.com">
<label class="form-helper">You don't need to include http://</label>
</form>
Use the .textarea
class to get default styling for textareas. When choosing a type size and width for textareas, Solid suggests aiming for a measure of 52-78 characters.
<form>
<label class="form-label">Add a Comment</label>
<textarea class="textarea"></textarea>
</form>
Use the .select
class to get default styling for select fields. Optionally, use a form label above your select if the default text is not descriptive enough, if the default is one of the valid select options, or if the selection will be saved and viewable again later.
<form>
<select class="select">
<option value="choose">Choose your personality</option>
<option value="amazing">Amazing</option>
<option value="boring">Boring</option>
<option value="fun">Fun</option>
</select>
</form>
Use the .radio
class alongside a label
to get Solid's default styling for radio inputs.
<form>
<input type="radio" class="radio" id="option_1" value="option_1" name="options" checked="checked">
<label for="option_1">Option 1</label>
<input type="radio" class="radio" id="option_2" value="option_2" name="options">
<label for="option_2">Option 2</label>
</form>
Use the .checkbox
class alongside a label
to get Solid's default styling for radio inputs.
<form>
<input type="checkbox" class="checkbox" id="check_1" value="check_1" name="checkboxes" checked="checked">
<label for="check_1">Option 1</label>
<input type="checkbox" class="checkbox" id="check_2" value="check_2" name="checkboxes">
<label for="check_2">Option 2</label>
</form>
Append the .form-label--small
class to get a smaller version of Solid's form labels.
<form>
<label class="form-label form-label--small">Add your website</label>
</form>
Append the .text-input--small
class to get a smaller version of Solid's text inputs.
<form>
<label class="form-label form-label--small">Choose a username</label>
<input type="text" class="text-input text-input--small" placeholder="www.example.com">
</form>
Append the .textarea--small
class to get a smaller version of Solid's textareas.
<form>
<label class="form-label form-label--small">Add a Comment</label>
<textarea class="textarea textarea--small"></textarea>
</form>
Use the .select--small
class to get the smaller version of Solid's select field.
<form>
<select class="select select--small">
<option value="choose">Choose your personality</option>
<option value="amazing">Amazing</option>
<option value="boring">Boring</option>
<option value="fun">Fun</option>
</select>
</form>
Wrap each field in a fieldset
and add a .form-fieldset--warning
class to change the child label
and form field styling. Additionally, add a span
below the input with a .form-feedback
class to inform the user what needs to be adjusted.
<form>
<fieldset class="fieldset form-fieldset--warning">
<label class="form-label">Your name</label>
<input type="text" class="text-input">
<span class="form-feedback">Caps lock is on!</span>
</fieldset>
</form>
Wrap each field in a fieldset
and add a .form-fieldset--error
class to change the child label
and form field styling. Additionally, add a span
below the input with a .form-feedback
class to inform the user what needs to be adjusted.
<form>
<fieldset class="fieldset form-fieldset--error">
<label class="form-label">Your name</label>
<input type="text" class="text-input">
<span class="form-feedback">Your name can't be Wolverine</span>
</fieldset>
</form>
Wrap each field in a fieldset
and add a .form-fieldset--success
class to change the child label
and form field styling. Additionally, add a span
below the input with a .form-feedback
class to inform the user what needs to be adjusted.
<form>
<fieldset class="fieldset form-fieldset--success">
<label class="form-label">Your name</label>
<input type="text" class="text-input">
<span class="form-feedback">Boom. Looks good!</span>
</fieldset>
</form>