Radio
Basic radio
<form class="form">
<div class="form-group">
<label>Default radios</label>
<div class="radio-list">
<label class="radio">
<input type="radio"/> Default
<span></span>
</label>
<label class="radio radio-disabled">
<input type="radio" disabled="disabled" checked="checked"/> Disabled
<span></span>
</label>
<label class="radio">
<input type="radio" checked="checked"/> Checked
<span></span>
</label>
</div>
</div>
<div class="form-group">
<label>Inline radios</label>
<div class="radio-inline">
<label class="radio">
<input type="radio"/> Option 1
<span></span>
</label>
<label class="radio">
<input type="radio"/> Option 2
<span></span>
</label>
<label class="radio">
<input type="radio"/> Option 3
<span></span>
</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"/> Option 1
<span></span>
</label>
<label class="radio">
<input type="radio"/> Option 2
<span></span>
</label>
<label class="radio">
<input type="radio" checked="checked"/> Option 3
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</form>
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"/> Default
<span></span>
</label>
<label class="radio">
<input type="radio" checked="checked"/> Checked
<span></span>
</label>
<label class="radio radio-disabled">
<input type="radio" disabled="disabled"/> Disabled
<span></span>
</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"/> Option 1
<span></span>
</label>
<label class="radio">
<input type="radio"/> Option 2
<span></span>
</label>
<label class="radio">
<input type="radio"/> Option 3
<span></span>
</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" cheched>
<input type="radio"/> Option 1
<span></span>
</label>
<label class="radio">
<input type="radio" checked="checked"/> Option 2
<span></span>
</label>
<label class="radio">
<input type="radio"/> Option 3
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
Color & Style Options
<form class="form">
<div class="form-group">
<label>Color options:</label>
<div class="radio-inline">
<label class="radio radio-primary">
<input type="radio" checked="checked"/> Primary
<span></span>
</label>
<label class="radio radio-success">
<input type="radio" checked="checked"/> Success
<span></span>
</label>
<label class="radio radio-danger">
<input type="radio" checked="checked"/> Danger
<span></span>
</label>
<label class="radio radio-warning">
<input type="radio" checked="checked"/> Warning
<span></span>
</label>
<label class="radio radio-info">
<input type="radio" checked="checked"/> Info
<span></span>
</label>
<label class="radio radio-dark">
<input type="radio" checked="checked"/> Dark
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Default Style:</label>
<div class="radio-inline">
<label class="radio radio-success">
<input type="radio"/> Option 1
<span></span>
</label>
<label class="radio radio-success">
<input type="radio" checked="checked"/> Option 2
<span></span>
</label>
<label class="radio radio-brand">
<input type="radio" checked="checked"/> Option 3
<span></span>
</label>
<label class="radio radio-warning radio-disabled">
<input type="radio" disabled="disabled"/> Disabled
<span></span>
</label>
<label class="radio radio-danger radio-disabled">
<input type="radio" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="separator separator-dashed mt-4 mb-4"></div>
<div class="form-group">
<label>Square Style:</label>
<div class="radio-inline">
<label class="radio radio-square radio-success">
<input type="radio"/> Option 1
<span></span>
</label>
<label class="radio radio-square radio-success">
<input type="radio" checked="checked"/> Option 2
<span></span>
</label>
<label class="radio radio-square radio-brand">
<input type="radio" checked="checked"/> Option 3
<span></span>
</label>
<label class="radio radio-square radio-warning radio-disabled">
<input type="radio" disabled="disabled"/> Disabled
<span></span>
</label>
<label class="radio radio-square radio-danger radio-disabled">
<input type="radio" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="separator separator-dashed mt-4 mb-4"></div>
<div class="form-group">
<label>Rounded Style:</label>
<div class="radio-inline">
<label class="radio radio-rounded radio-success">
<input type="radio"/> Option 1
<span></span>
</label>
<label class="radio radio-rounded radio-success">
<input type="radio" checked="checked"/> Option 2
<span></span>
</label>
<label class="radio radio-rounded radio-brand">
<input type="radio" checked="checked"/> Option 3
<span></span>
</label>
<label class="radio radio-rounded radio-warning radio-disabled">
<input type="radio" disabled="disabled"/> Disabled
<span></span>
</label>
<label class="radio radio-rounded radio-danger radio-disabled">
<input type="radio" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="separator separator-dashed mt-4 mb-4"></div>
<div class="form-group">
<label>Outline Style:</label>
<div class="radio-inline">
<label class="radio radio-outline radio-success">
<input type="radio"/> Option 1
<span></span>
</label>
<label class="radio radio-outline radio-success">
<input type="radio" checked="checked"/> Option 2
<span></span>
</label>
<label class="radio radio-outline radio-brand">
<input type="radio" checked="checked"/> Option 3
<span></span>
</label>
<label class="radio radio-outline radio-warning radio-disabled">
<input type="radio" disabled="disabled"/> Disabled
<span></span>
</label>
<label class="radio radio-outline radio-danger radio-disabled">
<input type="radio" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="separator separator-dashed mt-4 mb-4"></div>
<div class="form-group">
<label>Outline 2x Style:</label>
<div class="radio-inline">
<label class="radio radio-outline radio-outline-2x radio-success">
<input type="radio"/> Option 1
<span></span>
</label>
<label class="radio radio-outline radio-outline-2x radio-success">
<input type="radio" checked="checked"/> Option 2
<span></span>
</label>
<label class="radio radio-outline radio-outline-2x radio-brand">
<input type="radio" checked="checked"/> Option 3
<span></span>
</label>
<label class="radio radio-outline radio-outline-2x radio-warning radio-disabled">
<input type="radio" disabled="disabled"/> Disabled
<span></span>
</label>
<label class="radio radio-outline radio-outline-2x radio-danger radio-disabled">
<input type="radio" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</form>
