Radio group
Allow users to see all available choices at once and select one option.
When to use
When users need to select only one option out of a set of mutually exclusive choices. When the number of available options can fit onto a mobile screen.
Resources
{#
Parameters:
- "id" (string) (default: 'ecl-radio-1')
- "name" (string) (default: 'ecl-radio')
- "desc" (string) (default: 'Description'): description for screen readers
- "radios" (array): collection of ecl-forms-radios
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
#}
{% include '@ecl/generic-component-form-radio-group' with { system: 'ec' } %}
{
"name": "radio-example",
"id": "example-1",
"desc": "Small description",
"radios": [
{
"id": "opt-1",
"value": "opt-1",
"label": "option 1"
},
{
"id": "opt-2",
"value": "opt-2",
"label": "option 2",
"checked": true
},
{
"id": "opt-3",
"value": "opt-3",
"label": "option 3",
"is_disabled": true
}
]
}
<div class="ecl-radio-group" role="radiogroup" aria-labelledby="example-1_label" id="example-1">
<p id="example-1_label" class="ecl-u-sr-only">Small description</p>
<label class="ecl-form-label ecl-radio"><input class="ecl-radio__input ecl-u-sr-only" type="radio" id="opt-1" value="opt-1" name="radio-example" /><span class="ecl-radio__label">option 1</span></label>
<label class="ecl-form-label ecl-radio"><input class="ecl-radio__input ecl-u-sr-only" type="radio" id="opt-2" value="opt-2" name="radio-example" checked /><span class="ecl-radio__label">option 2</span></label>
<label class="ecl-form-label ecl-radio ecl-radio--is-disabled"><input class="ecl-radio__input ecl-u-sr-only" type="radio" id="opt-3" value="opt-3" name="radio-example" disabled /><span class="ecl-radio__label">option 3</span></label>
</div>
-
Content:
/* * Radio group * @define radio-group */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-component-form-radio-group/generic-component-form-radio-group'; // Use generic mixin @include exports('ec-component-form-radio-group') { @include ecl-radio-group(); }
- URL: /components/raw/ec-component-form-radio-group/ec-component-form-radio-group.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-radio-group/ec-component-form-radio-group.scss
- Size: 297 Bytes
- Handle: @ecl/ec-component-form-radio-group
- Tags: atom
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-radio-group/ec-component-form-radio-group.twig