# Radio Button

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v1.2/components.html#radiobutton-wrapper)

### Examples

<div align="left"><figure><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2FlNFSECeLNS82IVF187Oj%2Fimage.png?alt=media&#x26;token=b7e2bcf0-2cb9-4728-989a-dbb21bdce8e6" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2FvUB0zRwsQDFPl5yXuC3C%2Fimage.png?alt=media&#x26;token=a72bc48d-fae5-4190-b489-e7f29caa3afe" alt=""><figcaption></figcaption></figure></div>

<div align="left"><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2FrLO07oXa2i1gLGcMgxWk%2Fimage.png?alt=media&#x26;token=7709eba8-b1b7-4ed3-be1c-a56195b7fb23" alt=""></div>

{% code overflow="wrap" %}

```html
<div class="container">
                    <h2 class="text-center">Radio Buttons</h2>
                    <div class="container text-left bordered">
                        <div class="form-group">
                            <h5>Radio Group (Stacked)</h5>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault1"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault1">
                                    Radio 1 (Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault2"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault2">
                                    Radio 2 (Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault3"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault3" checked=""> Radio 3 (Selected) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault4"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault4" disabled=""> Radio 4(Disabled Default) <span class="radio-overlay "></span>
                                </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault5"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault5">
                                    Radio 5 <span class="radio-overlay "></span> </label> </div>
                        </div>
                    </div>
                    <div class="container text-left bordered">
                        <div class="form-group field-has-error">
                            <h5>Radio Group with error (Stacked)</h5>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault11"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault11">
                                    Radio 1 (Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault21"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault21">
                                    Radio 2 (Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault31"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault31">
                                    Radio 3 (Selected) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault41"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault41">
                                    Radio 4(Disabled Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="RadioDefault51"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault51">
                                    Radio 5 <span class="radio-overlay "></span> </label> </div>
                            <span class="message text-danger"><i class="fas fa-minus-circle mr-1"></i>This is an
                                error message. </span>
                        </div>
                    </div>
                    <div class="container text-left bordered">
                        <h5>Radio Group (Inline)</h5>
                        <div class="form-group">
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault111"> Radio 1 (Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault211"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault211"> Radio 2 (Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault311"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault311" checked=""> Radio 3 (Selected) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault411"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault411" disabled=""> Radio 4(Disabled Default)
                                    <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault511"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault511"> Radio 5 <span class="radio-overlay ">
                                    </span> </label> </div>
                        </div>
                    </div>
                    <div class="container text-left bordered">
                        <h5>Radio Group with error (Inline)</h5>
                        <div class="form-group field-has-error">
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault1111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault1111"> Radio 1 (Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault2111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault2111"> Radio 2 (Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault3111"> <input class="form-check-input" type="radio" name="RadioDefault11" id="RadioDefault3111"> Radio 3 (Selected) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault4111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault4111"> Radio 4(Disabled Default) <span class="radio-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault5111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault5111"> Radio 5 <span class="radio-overlay "> </span> </label> </div>
                            <span class="message text-danger"><i class="fas fa-minus-circle mr-1"></i>This is an
                                error message. </span>
                        </div>
                    </div>
                    <div class="container text-left bordered">
                        <h5>Toggle Group (Inline)</h5>
                        <div class="form-group">
                            <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-primary active"> <input type="radio" name="options" id="option1" checked=""> Active </label> <label class="btn btn-outline-primary">
                                    <input type="radio" name="options" id="option2"> Radio </label> <label class="btn btn-outline-primary"> <input type="radio" name="options" id="option3">
                                    Radio </label> </div>
                        </div>
                    </div>
                    
                </div>
```

{% endcode %}

### When to use

* Used to select a single state from multiple options.
* The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them
