3.0.0-alpha.7 Alpha
Default Default Classic Light Dark Light Dark System
Search /
Default Default Classic Light Dark Light Dark System
Native Styles

Radio

<input type=radio>

Radios allow the user to select a single option from a group.

Want to do more? Check out the <wa-radio> component! 
<label><input type="radio" name="radio" value="1"> Option 1</label>
<label><input type="radio" name="radio" value="2"> Option 2</label>

Examples

Initial Value

To set the initial value and checked state, use the checked attribute on the corresponding radio.

<label><input type="radio" name="radio" value="1"> Option 1</label>
<label><input type="radio" name="radio" value="2"> Option 2</label>
<label><input type="radio" name="radio" value="3" checked> Option 3</label>

Disabled

Use the disabled attribute to disable a radio.

<label><input type="radio" name="radio" value="1"> Option 1</label>
<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
<label><input type="radio" name="radio" value="3"> Option 3</label>

Sizes

Use the size utilities to change the radios' size.



<fieldset class="wa-size-s">
	 <legend>Small</legend>
	<label><input type="radio" name="radio" value="1"> Option 1</label>
	<label><input type="radio" name="radio" value="2"> Option 2</label>
	<label><input type="radio" name="radio" value="3"> Option 3</label>
</fieldset>

<br />
<fieldset class="wa-size-m">
	 <legend>Medium</legend>
	<label><input type="radio" name="radio" value="1"> Option 1</label>
	<label><input type="radio" name="radio" value="2"> Option 2</label>
	<label><input type="radio" name="radio" value="3"> Option 3</label>
</fieldset>

<br />

<fieldset class="wa-size-l">
	 <legend>Large</legend>
	<label><input type="radio" name="radio" value="1"> Option 1</label>
	<label><input type="radio" name="radio" value="2"> Option 2</label>
	<label><input type="radio" name="radio" value="3"> Option 3</label>
</fieldset>
    No results