✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Radio

Cruip CSS

Checkbox

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

Class Description
.form-radio Required to make a radio button fit the template style

React props

Prop Type Default Accepted values
name string
value string
disabled boolean false
checked boolean false
required boolean false

Vue props

Prop Type Default Accepted values
name string
value string
disabled boolean false
checked boolean false
required boolean false

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

Learn more about the Sass logic behind each template.
Last updated on August 17, 2021