Button Inputs

Checkboxes

Checkboxes are used when the user can select multiple options from the given list. They are also used to confirm certain statements such as: I accept the Terms and Conditions, or Send me email updates.

If there is an Other option, this should include an open field for users to provide additional information.

Labels for checkboxes are aligned to the right of the box.

Radio Buttons

Radio buttons are used when the user can only select one of the options from the given list.

Radio buttons should follow the vertical format of the form. They should be placed beneath each other rather than beside each other.

If there is an Other option, this should include an open field for users to provide additional information.

Labels for radio buttons are aligned to the right of the button.

Switches

Switches are used when only one of two options can be selected. They represent simple questions such as yes/no or on/off style options. Typically, the yes/on option is more colourful and prominent than the no/off option.

Switches can be used in all kinds of forms, or other types of functions such as Settings, Profile Options etc.

Checkboxes

Aurora uses a custom style for checkboxes. See the example below:

Custom check

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Custom check</label>
</div>

Radio Buttons

Aurora uses a custom style for radio buttons. See the example below:

Custom radio 1

Custom radio 2

<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1">Custom radio 1</label>
</div>

<div class="custom-control custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
</div>

Disabled

Custom checkboxes and radios can also be disabled. Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled.

Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

To make button inputs inline instead of stacked, add the .custom-control-inline class to the .custom-control <div>.

Using Browser Defaults

If you wanted to use the default styles for checkboxes and radio buttons, see the example below:

Default checkbox

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

Default radio

Second default radio

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>

Switches

Switches are a custom component used when there is only a yes/no or on/off option for a field.

Toggle switch

<label class="switch">
  <input type="checkbox" />
  <span class="switch__toggle"></span>
  Toggle switch
</label>

Checkboxes

Checkboxes have four different states:

Custom check

Normal: 18px by 18px box, border radius of 4px, background colour of #F9F9F9 , border colour of #96A8B2 at 1px

Hover: 18px by 18px box, border radius of 4px, background color #FFFFFF, border colour of #4D5D6C at 1px

Focus: 18px by 18px box, border radius of 4px, background color #FFFFFF, border colour of #4D5D6C at 3px

Active: 18px by 18px box, border radius of 4px, background colour #4D5D6C, border colour of #96A8B2. Includes a white check icon centered within the box.

Radio Buttons

Custom radio 1

Custom radio 2

Normal: 18px by 18px circle, background colour of #F9F9F9, border colour of #96A8B2 at 1px

Hover: 18px by 18px circle, background color #FFFFFF, border colour of #4D5D6C at 1px

Focus: 18px by 18px circle, border radius of 4px, background color #FFFFFF, border colour of #4D5D6C at 3px

Active: 18px by 18pxcircle, border radius of 4px, background colour #4D5D6C, border colour of #96A8B2. Includes filled in smaller circle within the full button.

Switches

Toggle switch

Switches have four different states:

Off: 32px by 18px, border radius of 9px, slider background colour of #E3E4E5, knob colour #FFFFFF, border 1px with a colour of #666666. The knob is on the left of the slider.

Off, Hover/Focus: 32px by 18px, border radius of 9px, slider background colour of #E3E4E5, knob colour of #FFFFFF with a border of 3px and border colour of #4D5D6C , border 1px with a colour of #66666. The knob is on the left of the slider.

On: 32px by 18px, border radius of 9px, slider background colour of #FEC04F, knob colour #FFFFFF, border 1px with a colour of #666666. The knob is on the right of the slider.

On, Hover/Focus: 32px by 18px, border radius of 9px, slider background colour of #FEC04F, knob colour #FFFFFF with a border of 3px and colour of #4D5D6C, border 1px with a colour of #666666. The knob is on the right of the slider.