Primer Design System - Documentation

Variants

Variants change the way a component is presented. They are applied by utilizing various class names for the component.

Variant	Purpose
`default`	Default (no variant applied) looks similar to the standard HTML radio button. Used in all instances.
`boxed`	The boxed variant makes the radio buttons look more like chunky buttons. Used for small data sets.

Behaviors

Behaviors change the way a component "behaves". These can be stacked with variants to increase customization of the component.

Behavior	Purpose
`stacked`	Stacked is the default behavior for radio buttons. The buttons are displayed vertically. Used for larger data sets.
`inline`	Inline displays the button horizontally. Used for smaller data sets.

Anatomy

Fieldset

When doing a group of checkbox fields they should be wrapped in a fieldset element. This treats the elements as part of the same group. Fieldset requires the use of a legend element to label the group of fields.

Legend

The HTML legend element describes the group of elements. Required when using a fieldset. An optional label can be applied to the legend as well. The legend will be styled the same as the other form control label's. The legend does not have a for attribute.

<legend class="pmr-c-legend">
  Legend
  <span class="pmr-c-label__flag">
    (optional)
  </span>
</legend>

<legend class="pmr-c-legend">
  Legend
  <span class="pmr-c-label__flag">
    (optional)
  </span>
</legend>

Label

The HTML label element describes the fields purpose. Every form control must have a label associated to it. When using the radio button field these labels are styled differently from the standard label. This is because they are describing an option instead of a title for the field.

<label for="radio-item-1" class="pmr-c-radio-field__item-label">
  Label
</label>

<label for="radio-item-1" class="pmr-c-radio-field__item-label">
  Label
</label>

Input

To create a radio set the HTML input element's type to radio. Primer overrides the default browser radio using custom CSS. Make sure the order of the elements for each field follows the below pattern:

<li class="pmr-c-radio-field__item">
        <input type="radio" class="pmr-c-radio__input" id="radio-item-1" name="radio-field" value="value-1" />
        <span class="pmr-c-radio__custom-radio"></span>
        <label class="pmr-c-radio-field__item-label" for="item-1">
           Item 1
        </label>
</li>

<li class="pmr-c-radio-field__item">
        <input type="radio" class="pmr-c-radio__input" id="radio-item-1" name="radio-field" value="value-1" />
        <span class="pmr-c-radio__custom-radio"></span>
        <label class="pmr-c-radio-field__item-label" for="item-1">
           Item 1
        </label>
</li>

Field Note

The field note can be used to display descriptive text to provide additional context or error messages. Icons can be used in the field note like shown below:

<div id="radio-field-1__fieldnote" class="pmr-c-fieldnote">
  <svg class="pmr-c-icon pmr-c-fieldnote__icon">
    <use xlink:href="assets/pmr-icons.svg#close-circle"></use>
  </svg>
  This is an error state fieldnote
</div>

<div id="radio-field-1__fieldnote" class="pmr-c-fieldnote">
  <svg class="pmr-c-icon pmr-c-fieldnote__icon">
    <use xlink:href="assets/pmr-icons.svg#close-circle"></use>
  </svg>
  This is an error state fieldnote
</div>

States

Error

The error state can be applied when the data entered was invalid. Apply the pmr-is-error class to the wrapping div around the form control. Make sure to use the close-circle icon with error messages only.

Disabled

Disabled can be used to prevent the user from modifying a field. Apply the pmr-is-disabled class to the wrapping div and disabled to the input field.

Radio Buttons