3.0.0-alpha.12 Alpha
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! 
<div class="wa-cluster">
  <label><input type="radio" name="radio" value="1"> Option 1</label>
  <label><input type="radio" name="radio" value="2"> Option 2</label>
</div>

Examples

Initial Value

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

<div class="wa-cluster">
  <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>
</div>

Disabled

Use the disabled attribute to disable a radio.

<div class="wa-cluster">
  <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>
</div>

Sizes

Use the size utilities to change the radios' size.



<fieldset class="wa-size-s wa-cluster">
  <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 wa-cluster">
  <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 wa-cluster">
	  <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>

Orientation

You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience wa-cluster and wa-stack utilities make this easy.

<div class="wa-cluster">
  <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>
</div>

        
<div class="wa-stack">
  <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>
</div>

Opting In to Native Radio Styles

If you want to use the Native Radio styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/radio.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/radio.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results