Radio
Basic radio
<div class="form-group">
<label>Default radios</label>
<div class="radio-list">
<label class="radio">
<input type="radio" name="radios1"/>
<span></span>
Default
</label>
<label class="radio radio-disabled">
<input type="radio" disabled="disabled" checked="checked" name="radios1"/>
<span></span>
Disabled
</label>
<label class="radio">
<input type="radio" checked="checked" name="radios1"/>
<span></span>
Checked
</label>
</div>
</div>
<div class="form-group">
<label>Inline radios</label>
<div class="radio-inline">
<label class="radio">
<input type="radio" name="radios2"/>
<span></span>
Option 1
</label>
<label class="radio">
<input type="radio" name="radios2"/>
<span></span>
Option 2
</label>
<label class="radio">
<input type="radio" name="radios2"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Inline radios</label>
<div class="radio-inline">
<label class="radio">
<input type="radio" checked="checked" name="radios3"/>
<span></span>
Option 1
</label>
<label class="radio">
<input type="radio" name="radios3"/>
<span></span>
Option 2
</label>
<label class="radio">
<input type="radio" checked="checked" name="radios3"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Large Size</label>
<div class="radio-inline">
<label class="radio radio-lg">
<input type="radio" checked="checked" name="radios3_1"/>
<span></span>
Option 1
</label>
<label class="radio radio-lg">
<input type="radio" name="radios3_1"/>
<span></span>
Option 2
</label>
<label class="radio radio-lg">
<input type="radio" name="radios3_1"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Square Style</label>
<div class="radio-inline">
<label class="radio radio-square">
<input type="radio" checked="checked" name="radios13_1"/>
<span></span>
Option 1
</label>
<label class="radio radio-square">
<input type="radio" name="radios13_1"/>
<span></span>
Option 2
</label>
<label class="radio radio-square">
<input type="radio" name="radios13_1"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Rounded Style</label>
<div class="radio-inline">
<label class="radio radio-rounded">
<input type="radio" checked="checked" name="radios15_1"/>
<span></span>
Option 1
</label>
<label class="radio radio-rounded">
<input type="radio" name="radios15_1"/>
<span></span>
Option 2
</label>
<label class="radio radio-rounded">
<input type="radio" name="radios15_1"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
Horizontal Form
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">Radios</label>
<div class="col-9 col-form-label">
<div class="radio-list">
<label class="radio">
<input type="radio" name="radios4"/>
<span></span>
Default
</label>
<label class="radio">
<input type="radio" checked="checked" name="radios4"/>
<span></span>
Checked
</label>
<label class="radio radio-disabled">
<input type="radio" disabled="disabled" name="radios4"/>
<span></span>
Disabled
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Inline radios</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio">
<input type="radio" name="radios5"/>
<span></span>
Option 1
</label>
<label class="radio">
<input type="radio" name="radios5"/>
<span></span>
Option 2
</label>
<label class="radio">
<input type="radio" name="radios5"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Inline radios</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio">
<input type="radio" name="radios6"/>
<span></span>
Option 1
</label>
<label class="radio">
<input type="radio" checked="checked" name="radios6"/>
<span></span>
Option 2
</label>
<label class="radio">
<input type="radio" name="radios6"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
Theme Colors
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">Success State</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio radio-success">
<input type="radio" name="radios5"/>
<span></span>
Default
</label>
<label class="radio radio-success">
<input type="radio" name="radios5" checked="checked" />
<span></span>
Checked
</label>
<label class="radio radio-success radio-disabled">
<input type="radio" name="radios5" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Primary State</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio radio-primary">
<input type="radio" name="radios11"/>
<span></span>
Default
</label>
<label class="radio radio-primary">
<input type="radio" name="radios11" checked="checked" />
<span></span>
Checked
</label>
<label class="radio radio-primary radio-disabled">
<input type="radio" name="radios11" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Danger State</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio radio-danger">
<input type="radio" name="radios12"/>
<span></span>
Default
</label>
<label class="radio radio-danger">
<input type="radio" name="radios12" checked="checked" />
<span></span>
Checked
</label>
<label class="radio radio-danger radio-disabled">
<input type="radio" name="radios12" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
Outline Type
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">Outline Default</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio radio-outline radio-success">
<input type="radio" name="radios15"/>
<span></span>
Default
</label>
<label class="radio radio-outline radio-success">
<input type="radio" name="radios15" checked="checked" />
<span></span>
Checked
</label>
<label class="radio radio-outline radio-success radio-disabled">
<input type="radio" name="radios15" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Outline 2x</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio radio-outline radio-outline-2x radio-primary">
<input type="radio" name="radios16"/>
<span></span>
Default
</label>
<label class="radio radio-outline radio-outline-2x radio-primary">
<input type="radio" name="radios16" checked="checked" />
<span></span>
Checked
</label>
<label class="radio radio-outline radio-outline-2x radio-primary radio-disabled">
<input type="radio" name="radios16" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
Accent Type
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">Success</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio radio-accent radio-success">
<input type="radio" name="radios18"/>
<span></span>
Default
</label>
<label class="radio radio-accent radio-success">
<input type="radio" name="radios18" checked="checked" />
<span></span>
Checked
</label>
<label class="radio radio-accent radio-success radio-disabled">
<input type="radio" name="radios18" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Danger</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio radio-accent radio-danger">
<input type="radio" name="radios19"/>
<span></span>
Default
</label>
<label class="radio radio-accent radio-danger">
<input type="radio" name="radios19" checked="checked" />
<span></span>
Checked
</label>
<label class="radio radio-accent radio-danger radio-disabled">
<input type="radio" name="radios19" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Primary</label>
<div class="col-9 col-form-label">
<div class="radio-inline">
<label class="radio radio-accent radio-primary">
<input type="radio" name="radios20"/>
<span></span>
Default
</label>
<label class="radio radio-accent radio-primary">
<input type="radio" name="radios20" checked="checked" />
<span></span>
Checked
</label>
<label class="radio radio-accent radio-primary radio-disabled">
<input type="radio" name="radios20" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
