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.