Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.
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.