Replace the default radio of the browser by a more user friendly version.
Overview
Use them as a replacement for the default radio in your forms.
Usage
Dependencies
To get the radio component working, include the dependencies in your project in the following order:
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"
@import 'design-system/src/scss/01-atoms/radio';
include /node_modules/design-system/src/pug/01-atoms/radio
import Tooltips from 'design-system/src/js/01-atoms/radio';
Basic code
A radio is composed by a
label
containing an hidden
input
which has the
type="radio"
and a
tabindex="-1"
to avoid the focus possibility. It contains also 2
span, one used to emulate the shape and the other the label.
<label class="radio" for="water">
<input class="radio__input" type="radio" tabindex="-1" id="water" name="drinks" value="water">
<span class="radio__shape" tabindex="0"></span>
<span class="radio__label">Water</span>
</label>
label.radio(for='water')
input#water.radio__input(type='radio', tabindex='-1', name='drinks', value='water')
span.radio__shape(tabindex='0')
span.radio__label Water
new Radio();
Pug mixin
A pug mixin is available to implement the radio with ease, find the parameters below:
+radio(label, id, name, value, disabled)
| # | Name | Default | Required | Description |
|---|---|---|---|---|
| 1 | label |
/ | Yes | Set the label of the radio. |
| 2 | id |
/ | Yes | Set the
id
attribute of the radio.
|
| 3 | name |
/ | Yes | Set the
name
attribute the radio.
|
| 4 | value |
/ | Yes | Set the
value
attribute of the the radio.
|
| 5 | disabled |
'false' |
No | Specify if the radio should be disabled by setting this parameter to
'true'
.
|
Modifiers
Add the following modifier to change the appearance of the radio.
Disabled
Disable the radio.