<fieldset class="form-item ">
<legend class="form-item__legend" id="">Radio buttons</legend>
<label for="radio-1" class="radio__label">
<input id="radio-1" type="radio" name="radios" class="radio__input" aria-invalid="true">
<span>Radio button 1</span>
</label>
<label for="radio-2" class="radio__label">
<input id="radio-2" type="radio" name="radios" class="radio__input" aria-invalid="true">
<span>Radio button 2</span>
</label>
</fieldset>
<fieldset class="form-item {{ getmodifiers modifiers "form-item"}}">
<legend class="form-item__legend" id="">Radio buttons</legend>
{{{ ariainvalid }}}
{{#each radios}}
<label for="{{value}}" class="radio__label">
<input id="{{value}}" type="{{type}}" name="{{name}}" class="radio__input"{{#if disabled}} disabled{{/if}}{{#if checked}} checked{{/if}} {{{ getattributes attr }}}>
<span>{{label}}</span>
</label>
{{/each}}
{{#if errorMsg}}
<div class="form-item__error-msg">{{errorMsg}}</div>
{{/if}}
</fieldset>
{
"radios": [
{
"name": "radios",
"disabled": false,
"checked": false,
"label": "Radio button 1",
"value": "radio-1",
"type": "radio",
"errorMsg": "Här gick det fel",
"attr": {
"aria-invalid": true
}
},
{
"name": "radios",
"disabled": false,
"checked": false,
"label": "Radio button 2",
"value": "radio-2",
"type": "radio",
"errorMsg": "Här gick det fel",
"attr": {
"aria-invalid": true
}
}
]
}
import React from 'react';
import PropTypes from 'prop-types';
const Radio = ({ id, name, options, label, selectedValue, onChange, modifier, errorMsg }) => {
const handleChange = (key) => {
if (onChange) {
onChange(key);
}
};
return (
<fieldset className={`form-item${modifier ? ` form-item--${modifier}` : ''}`}>
<legend className="form-item__legend">{label}</legend>
{options.map((option) => (
<label htmlFor={`${id}-${option.key}`} className="radio__label" key={option.key}>
<input
id={`${id}-${option.key}`}
type="radio"
name={name}
value={option.key}
checked={selectedValue === option.key}
onChange={() => handleChange(option.key)}
className="radio__input"
disabled={option.disabled}
aria-invalid={option.error}
/>
<span>{option.value}</span>
</label>
))}
{errorMsg && (
<div className="form-item__error-msg">{errorMsg}</div>
)}
</fieldset>
);
};
Radio.propTypes = {
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
label: PropTypes.string,
options: PropTypes.arrayOf(
PropTypes.shape({
key: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
disabled: PropTypes.bool,
error: PropTypes.bool
})
).isRequired,
selectedValue: PropTypes.string,
onChange: PropTypes.func,
modifier: PropTypes.string,
errorMsg: PropTypes.string
};
export default Radio;
.radio__input {
position: absolute;
height: size(3);
width: size(3);
}
%radio__label {
display: block;
position: relative;
padding-left: size(4);
color: $color-black;
margin-bottom: size(2);
line-height: size(3);
> span:before {
content: '';
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: size(3);
width: size(3);
border: 1px solid $color-input-border;
background-color: $color-input-background;
border-radius: 100%;
// Makes lable center aligned with input field
margin-top: -2px;
}
> input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
input:checked ~ span {
color: $color-input-selected;
&:before {
border: size(.75) solid $color-input-selected;
}
}
input[aria-invalid='true']:not(:checked) ~ span, input.error {
color: $color-error;
&:before {
border-color: $color-input-border-error;
}
}
input:disabled + & {
color: $color-input-color-disabled;
&:before {
border-color: $color-input-border-disabled;
}
}
}
.radio__label {
@extend %radio__label
}
.form-item--radio-pill {
.radio__label {
@extend %radio__label;
display: inline-block;
padding: 0;
margin-bottom: size(1);
span {
display: inline-block;
margin-right: size(1);
padding: 3px size(3);
border-radius: 9999px;
border: 1px solid $color-green-dark;
font-size: size(1.5);
color: $color-green-dark;
font-weight: $font-weight-bold;
}
> span:before {
display: none;
}
input:checked ~ span {
background-color: $color-green-dark;
color: $color-white;
border-color: $color-green-dark;
}
input:focus ~ span {
outline: 3px auto -webkit-focus-ring-color;
outline-offset: 3px;
}
}
}
No notes defined.