Radio

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

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.