Input
Input elements like checkbox, toggle, text-input are used when user interaction and input is required.
Checkboxes allow the user to select one or more items from a set. To a label give a class of
.input-checkbox
and inside add input of type checkbox and span. Add the label text inside the span.
  <label className="input-checkbox">
    <input type="checkbox" />
    <span className="text-black">
      Label
    </span>
  </label>
Radio buttons allow the user to select one option from a set. To a label give a class of
.input-radio
and inside add input of type radio and span. Add the label text inside the span. Add
.radio--light
for light scheme variant.

  <label className="input-radio radio--light">
    <input
      name="group"
      type="radio"
    />
    <span>
      Radio Option Dark 1
    </span>
  </label>
  <label className="input-radio radio--light">
    <input
      name="group"
      type="radio"
    />
    <span>
      Radio Option Dark 2
    </span>
  </label>
Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. To a label give a class of
.input-toggle
and inside add input of type checkbox and span. Add the label text inside the span. Add
.toggle--light
for light scheme variant.

  <label className="input-toggle toggle--light">
    <input type="checkbox" />
    <span className="text-black">
      Toggle
    </span>
  </label>
Text#
Add class
.input-text
to a div element and then inside add a label, input of type text and span with class
.focus-border
. Add
.input-text--light
for light scheme variant.

  <div className="input-text input-text--light container-xs">
    <input
      placeholder="Placeholder Text1"
      type="text"
    />
    <span className="focus-border" />
  </div>
Outlined Text#
Add class
.input-text
and
.input-text--bcg
to a div element and then inside add a label and input of type text. Add
.input-text--light
for light scheme variant.
  <div className="input-text input-text--bcg input-text--light container-xs mb-4">
    <label htmlFor="placeholder3">
      Outlined Text Input
    </label>
    <input
      id="placeholder3"
      name="placeholder3"
      placeholder="Placeholder Text"
      type="text"
    />
  </div>
On this page