Radio

Like the checkboxes, radio buttons need a wrapping <label> too 👇

<!-- Radio buttons -->
<div>
    <label class="form-radio">
        <input type="radio" name="color">Yellow
    </label>
</div>
<div>
    <label class="form-radio">
        <input type="radio" name="color">Blue
    </label>
</div>

<!-- Inline radio buttons -->
<span>
    <label class="form-radio">
        <input type="radio" name="name">John
    </label>
</span>
<span class="ml-16">
    <label class="form-radio">
        <input type="radio" name="name">Jane
    </label>
</span>

For React and Vue templates we have provided a radio component to be used as in the example below.

<!-- Radio buttons -->
<div>
  <Radio name="color">Yellow</Radio>
</div>
<div>
  <Radio name="color">Blue</Radio>
</div>

<!-- Inline radio buttons -->
<span>
  <Radio name="name">John</Radio>
</span>
<span className="ml-16">
  <Radio name="name">Jane</Radio>
</span>

<!-- Radio buttons -->
<div>
  <c-radio name="color">Yellow</c-radio>
</div>
<div>
  <c-radio name="color">Blue</c-radio>
</div>

<!-- Inline radio buttons -->
<span>
  <c-radio name="name">John</c-radio>
</span>
<span className="ml-16">
  <c-radio name="name">Jane</c-radio>
</span>

TL;DR

List of available HTML classes

React props

Vue props

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/elements/_forms.scss
👆🚫 Don’t edit this file!

📋 Settings file

src/assets/scss/settings/elements/_buttons-and-forms.scss
👆Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/elements/_forms.scss
👆Use this to add custom CSS