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>