Radio

General information

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 examples below.

React
Vue
React
// 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>
Vue
// 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-checkbox

Required to make a checkbox 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.