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
.
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.
When necessary, place additional helper text beneath inputs in a label
with a .form-helper
class.
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.
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.
Use the .radio
class alongside a label
to get Solid's default styling for radio inputs.
Use the .checkbox
class alongside a label
to get Solid's default styling for radio inputs.
Append the .form-label--small
class to get a smaller version of Solid's form labels.
Append the .text-input--small
class to get a smaller version of Solid's text inputs.
Append the .textarea--small
class to get a smaller version of Solid's textareas.
Use the .select--small
class to get the smaller version of Solid's select field.
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.
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.
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.