### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Radios

### Outlined Radio

Huro provides default styled radio buttons in 2 main styles, `outlined` and `solid`. Those checkboxes also support all main colors. The available modifiers are `is-primary`, `is-success`, `is-info` `is-warning`, `is-danger`.

Choice 1 Choice 2 Choice 3 Choice 4 Choice 5 Choice 6

          <div class="field">
              <div class="control">
                  <label class="radio">
                      <input type="radio" name="outlined_radio">
                      <span></span>
                      Choice 1
                  </label>

                  <label class="radio is-outlined is-primary">
                      <input type="radio" name="outlined_radio">
                      <span></span>
                      Choice 2
                  </label>

                  <label class="radio is-outlined is-info">
                      <input type="radio" name="outlined_radio">
                      <span></span>
                      Choice 3
                  </label>

                  <label class="radio is-outlined is-success">
                      <input type="radio" name="outlined_radio">
                      <span></span>
                      Choice 4
                  </label>

                  <label class="radio is-outlined is-warning">
                      <input type="radio" name="outlined_radio">
                      <span></span>
                      Choice 5
                  </label>

                  <label class="radio is-outlined is-danger">
                      <input type="radio" name="outlined_radio">
                      <span></span>
                      Choice 6
                  </label>
              </div>
          </div>

### Outlined Square

Huro radio buttons can be squares instead of circles. Simply add the `is-square` modifier class to your `radio` element. See the code example for more details about usage.

Choice 1 Choice 2 Choice 3 Choice 4 Choice 5 Choice 6

          <div class="field">
              <div class="control">
                  <label class="radio is-square">
                      <input type="radio" name="outlined_square_radio">
                      <span></span>
                      Choice 1
                  </label>

                  <label class="radio is-square is-outlined is-primary">
                      <input type="radio" name="outlined_square_radio">
                      <span></span>
                      Choice 2
                  </label>

                  <label class="radio is-square is-outlined is-info">
                      <input type="radio" name="outlined_square_radio">
                      <span></span>
                      Choice 3
                  </label>

                  <label class="radio is-square is-outlined is-success">
                      <input type="radio" name="outlined_square_radio">
                      <span></span>
                      Choice 4
                  </label>

                  <label class="radio is-square is-outlined is-warning">
                      <input type="radio" name="outlined_square_radio">
                      <span></span>
                      Choice 5
                  </label>

                  <label class="radio is-square is-outlined is-danger">
                      <input type="radio" name="outlined_square_radio">
                      <span></span>
                      Choice 6
                  </label>
              </div>
          </div>

### Solid Radio

Huro provides default styled radio buttons in 2 main styles, `outlined` and `solid`. Those checkboxes also support all main colors. The available modifiers are `is-primary`, `is-success`, `is-info` `is-warning`, `is-danger`.

Choice 1 Choice 2 Choice 3 Choice 4 Choice 5 Choice 6

          <div class="field">
              <div class="control">
                  <label class="radio is-solid">
                      <input type="radio" name="solid_radio">
                      <span></span>
                      Choice 1
                  </label>

                  <label class="radio is-solid is-primary">
                      <input type="radio" name="solid_radio">
                      <span></span>
                      Choice 2
                  </label>

                  <label class="radio is-solid is-info">
                      <input type="radio" name="solid_radio">
                      <span></span>
                      Choice 3
                  </label>

                  <label class="radio is-solid is-success">
                      <input type="radio" name="solid_radio">
                      <span></span>
                      Choice 4
                  </label>

                  <label class="radio is-solid is-warning">
                      <input type="radio" name="solid_radio">
                      <span></span>
                      Choice 5
                  </label>

                  <label class="radio is-solid is-danger">
                      <input type="radio" name="solid_radio">
                      <span></span>
                      Choice 6
                  </label>
              </div>
          </div>

### Solid Square

Huro radio buttons can be squares instead of circles. Simply add the `is-square` modifier class to your `radio` element. See the code example for more details about usage.

Choice 1 Choice 2 Choice 3 Choice 4 Choice 5 Choice 6

          <div class="field">
              <div class="control">
                  <label class="radio is-solid is-square">
                      <input type="radio" name="solid_square_radio">
                      <span></span>
                      Choice 1
                  </label>

                  <label class="radio is-solid is-square is-primary">
                      <input type="radio" name="solid_square_radio">
                      <span></span>
                      Choice 2
                  </label>

                  <label class="radio is-solid is-square is-info">
                      <input type="radio" name="solid_square_radio">
                      <span></span>
                      Choice 3
                  </label>

                  <label class="radio is-solid is-square is-success">
                      <input type="radio" name="solid_square_radio">
                      <span></span>
                      Choice 4
                  </label>

                  <label class="radio is-solid is-square is-warning">
                      <input type="radio" name="solid_square_radio">
                      <span></span>
                      Choice 5
                  </label>

                  <label class="radio is-solid is-square is-danger">
                      <input type="radio" name="solid_square_radio">
                      <span></span>
                      Choice 6
                  </label>
              </div>
          </div>