{{> widgets/breadcrumb/breadcrumb}}

<div class="card  mb-4">
	<div class="card-content">
		<div class="card-header justify-content-between d-flex">
			<h3 class="card-title"> {{translation.radiobuttons}} </h3>
		</div>
		<div class="card-data">
			<p class="pb-4">Radio Buttons are used when the user must make only one selection out of a group of items. The for attribute is necessary to bind our custom radio button with the input. Add the input's id as the value of the for attribute of the label. Add radio buttons to a group by adding the name attribute along with the same corresponding value for each of the radio buttons in the group. Create disabled radio buttons by adding the disabled attribute as shown below.</p>
			<form action="#">
				<p>
					<label>
		        		<input name="group1" type="radio" checked />
		        		<span>Red</span>
		      	</label>
				</p>
				<p>
					<label>
		       		<input name="group1" type="radio" />
		        		<span>Yellow</span>
		      	</label>
				</p>
				<p>
					<label>
		        		<input class="with-gap" name="group1" type="radio"  />
		        		<span>Green</span>
		      	</label>
				</p>
				<p>
					<label>
		        		<input name="group1" type="radio" disabled="disabled" />
		        		<span>Brown</span>
		      	</label>
				</p>
			</form>
		</div>
	</div>
</div>

<div class="card mb-4">
	<div class="card-content">
		<div class="card-header justify-content-between d-flex">
			<h3 class="card-title"> {{translation.withgap }} </h3>
		</div>
		<div class="card-data">
			<p class="pb-4">To create a radio button with a gap, add class="with-gap" to your input. See the example below.</p>
			<form action="#">
				<p>
					<label>
			      	<input class="with-gap" name="group3" type="radio" checked />
			      	<span>Red</span>
			    	</label>
				</p>
			</form>
		</div>
	</div>
</div>
