Components

Selection controls

Checkboxes, radios, a toggle and a select. Checked and selected states use the brand indigo, keeping the green reserved for the one spark.

Selection controls
<Checkbox defaultChecked>Send me occasional updates</Checkbox>

<Radio name="plan" defaultChecked>Monthly</Radio>
<Radio name="plan">Yearly</Radio>

<Toggle defaultChecked label="Email notifications" />

<Select
  options={['Monthly', 'Quarterly', 'Yearly']}
  defaultValue="Monthly"
/>

Guidelines

Do
  • Use the brand indigo for the checked and selected state, with a white mark.
  • Mark the selected item in a menu with a check.
Do not
  • Do not use the accent green for selection. Green is the one spark, not a wash.
  • Do not replace controls with unlabelled icons.