Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

LUX design 

Static


Interactive

Regular


Html macro
sanitizefalse
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> 

<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline1" name="customRadioInlineA" class="custom-control-input">
	<label class="custom-control-label" for="customRadioInline1"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline2" name="customRadioInlineA" class="custom-control-input" checked>
	<label class="custom-control-label" for="customRadioInline2"></label>
</div>



Code Block
languagexml
themeDJango
titleCode
collapsetrue
<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline1" name="customRadioInlineA" class="custom-control-input">
	<label class="custom-control-label" for="customRadioInline1"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline2" name="customRadioInlineA" class="custom-control-input" checked>
	<label class="custom-control-label" for="customRadioInline2"></label>
</div>


Disabled

Error


Html macro
sanitizefalse
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>


<div class="card">
    <div class="card-header">Radio Button</div>
    <div class="card-body">
        <form>
            <div class="form-group row">
                <label for="inputKey" class="col-lg-3 col-form-label">Regular</label>
                <div class="col-lg-9">
                    <div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInlineA" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInlineA" class="custom-control-input" checked>
  <label class="custom-control-label" for="customRadioInline2"></label>
</div>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputKey" class="col-lg-3 col-form-label">Disabled</label>
                <div class="col-lg-9">
                    <div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline3" name="customRadioInlineB" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioInline3"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline4" name="customRadioInlineB" class="custom-control-input" disabled checked>
  <label class="custom-control-label" for="customRadioInline4"></label>
</div>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputKey" class="col-lg-3 col-form-label">Error</label>
                <div class="col-lg-9">
                    <div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline5" name="customRadioInlineC" class="custom-control-input is-invalid">
  <label class="custom-control-label" for="customRadioInline5"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline6" name="customRadioInlineC" class="custom-control-input is-invalid" checked>
  <label class="custom-control-label" for="customRadioInline6"></label>
</div>
                </div>
            </div>
        </form>
    </div>
</div>

...