Form Elements

Standard Buttons

---

For most general purpose usage.

Component	Code
Primary	<button type="button" class="btn btn-primary">Primary</button>
Primary shadow	<button type="button" class="btn btn-primary btn-shadow">Primary shadow</button>
Primary disabled	<button type="button" class="btn btn-primary disabled" disabled>Primary disabled</button>
Primary outlined	<button type="button" class="btn btn-outline-primary">Primary outlined</button>
Secondary	<button type="button" class="btn btn-secondary">Secondary</button>

Action Buttons

---

For specific instances where critical actions happen.

Component	Code
Success	<button type="button" class="btn btn-success">Success</button>
Info	<button type="button" class="btn btn-info">Info</button>
Warning	<button type="button" class="btn btn-warning">Warning</button>
Danger	<button type="button" class="btn btn-danger">Danger</button>

Text Input

---

For specific instances where critical actions happen.

Component	Code
Active We'll never share your email with anyone else.	<label for="example-input-text">Active</label> <input id="example-input-text" type="text" placeholder="Enter email" class="form-control"> <small class="text-muted">We'll never share your email with anyone else.</small>
Disabled	<label for="example-input-text">Disabled</label> <input id="example-input-text" type="text" disabled="disabled" placeholder="Can't enter anything" class="form-control">

Radio Buttons

Radio buttons must always be accompanied by a .c-ix-indicator tag and surrounded by a label.c-ix-radio tag

Component	Code
	<label class="c-ix-radio"><input type="radio" /><span class="c-ix-indicator"></span></label>
With text	<label class="c-ix-radio"><input type="radio" /><span class="c-ix-indicator"></span><span class="label-text">With text</span></label>
Disabled	<label class="c-ix-radio"><input type="radio" disabled/><span class="c-ix-indicator"></span><span class="label-text">Disabled</span></label>
Checked Disabled	<label class="c-ix-radio"><input type="radio" disabled checked/><span class="c-ix-indicator"></span><span class="label-text">Checked Disabled</span></label>

Checkbox

Checkbox must always be accompanied by a .c-ix-indicator tag and surrounded by a label.c-ix-checkbox tag

Component	Code
Some text	<label class="c-ix-checkbox"><input type="checkbox" /><span class="c-ix-indicator"></span><span class="label-text">Some text</span></label>
Disabled	<label class="c-ix-checkbox"><input type="checkbox" disabled/><span class="c-ix-indicator"></span><span class="label-text">Disabled</span></label>
Checked disabled	<label class="c-ix-checkbox"><input type="checkbox" disabled checked/><span class="c-ix-indicator"></span><span class="label-text">Some text</span></label>