These are available with special code that needs to be precisely used. The code is the same for checkboxes or radio buttons, the display changes based on the type on the input.
<form class="mzp-c-form">
<div class="mzp-c-choices">
<div class="mzp-c-choice ">
<input class="mzp-c-choice-control" type="checkbox"
name="Custom Checkboxes and Radio Buttons"
id="s-check-1" value="">
<label class="mzp-c-choice-label "
for="s-check-1">Checkbox</label>
</div>
<div class="mzp-c-choice ">
<input class="mzp-c-choice-control" type="radio"
name="Custom Checkboxes and Radio Buttons"
id="s-radio-1" value="">
<label class="mzp-c-choice-label "
for="s-radio-1">Radio Button</label>
</div>
</div>
</fieldset>
</form>mzp-c-choice-control for both checkboxes and radio buttonsThe field component is a wrapper around a field-label and field-control. It can contain an optional field-info.
<label> and <input> elements inherit some styles without having these classes applied. The classes will ensure the right spacing, especially when using other layout options.
<div class="mzp-c-form">
<div class="mzp-c-field ">
<label class="mzp-c-field-label"
for="id_name">Label</label>
<input class="mzp-c-field-control " type="text"
id="id_name">
</div>
<div class="mzp-c-field mzp-l-stretch">
<label class="mzp-c-field-label" for="id_name">Label
<span class="mzp-c-fieldnote">Get a full width input
by adding class <code>mzp-l-stretch</code> to the
parent.</span></label>
<input class="mzp-c-field-control " type="text"
id="id_name">
</div>
</form>The form header and footer components can be used to put some distance between the form components and their setup and submission content.
<form class="mzp-c-form">
<div class="mzp-c-form-header">
<h2 class="mzp-c-form-title">Title</h2>
<p>The title and this paragraph are inside a
form-header.</p>
</div>
<fieldset class="mzp-c-field-set">
<div class="mzp-c-field ">
<label class="mzp-c-field-label"
for="id_name">Label</label>
<input class="mzp-c-field-control " type="text"
id="id_name">
</div>
<div class="mzp-c-field ">
<label class="mzp-c-field-label"
for="id_user_email">Label</label>
<input class="mzp-c-field-control " type="text"
id="id_user_email">
<p class="mzp-c-field-info">Supplementary information
about the form fields can be included in a
field-info.</p>
</div>
</fieldset>
<div class="mzp-c-form-footer">
<p>This paragraph and the elements below are in a
form-footer</p>
<button class="mzp-c-button">Button</button>
<p class="mzp-c-form-info mzp-t-xs">The button container
component is optional - use it for button alignment
options if you need them.</p>
</div>
</form>Field sets group form fields that are related thematically. Field sets will often correspond to the fieldset element but not always.
<form class="mzp-c-form">
<fieldset class="mzp-c-field-set">
<legend class="mzp-c-form-subheading">Legend</legend>
<div class="mzp-c-field ">
<label class="mzp-c-field-label"
for="one">Label</label>
<input class="mzp-c-field-control " type="text"
id="one">
</div>
<div class="mzp-c-field ">
<label class="mzp-c-field-label"
for="two">Label</label>
<input class="mzp-c-field-control " type="text"
id="two">
</div>
</fieldset>
<fieldset class="mzp-c-field-set">
<legend class="mzp-c-form-subheading">Legend</legend>
<div class="mzp-c-field ">
<label class="mzp-c-field-label"
for="three">Label</label>
<input class="mzp-c-field-control " type="text"
id="three">
</div>
<div class="mzp-c-field ">
<label class="mzp-c-field-label"
for="four">Label</label>
<input class="mzp-c-field-control " type="text"
id="four">
</div>
<p class="mzp-c-field-set-info">Details for this field
set.</p>
</fieldset>
</form>legend elements add the mzp-c-form-subheading class to make them behave as expected.The .mzp-c-button-container class can be used around a group of buttons. It applies a flexbox context and the default form spacing. Modifier classes can then be added to change the layout.
<form class="mzp-c-form">
<div class="mzp-c-button-container">
<button class="mzp-c-button">
Primary</button>
<button class="mzp-c-button mzp-t-secondary">
Secondary</button>
<p class="mzp-c-button-info">More information.</p>
</div>
</form>mzp-l-align-end aligns buttons opposite to the text (right in LTR languages, left in RTL languages).mzp-l-align-center aligns buttons in the center.mzp-l-stretch makes buttons fill the width of the container. Multiple buttons will be stacked and full-width in smaller viewports, and appear inline and stretched in larger viewports (See the demo). This option is best suited to narrow forms.mzp-c-button-info element adds a brief note in small text, typically for some kind of disclaimer or contextual information about the form being submitted. It usually appears below/after the buttons but in some cases could appear above/before.More useful for supplementary error messages, not things that would need to display before user interaction.
Error messages should be short and simple. They should indicate what the user needs to do to resolve the error, not simply state that an error occurred. Bad example: “Invalid e-mail.” Good example: “Provide a complete e-mail address, like ‘yourname@example.com’.”
<form class="mzp-c-form mzp-is-error">
<div class="mzp-c-field ">
<label class="mzp-c-field-label"
for="s_event_date">Date</label>
<input class="mzp-c-field-control " type="text"
id="s_event_date" required aria-required="true"
value="March 3 '15"
aria-describedby="s_event_date-msg">
<div id="s_event_date-msg" class="mzp-c-field-msg"
role="tooltip">Must be in the format 2015-03-14.</div>
</div>
</form>aria-describedbyrole=tooltip to the message