Radios
About
What does it do?
- Allows users select one option from multiple options.
When to use it?
- When user can select just one option from multiple options.
When not to use it?
- When user may need to select more than one option.
Select all options that apply
HTML markup
<div class="wmnds-fe-group">
<div class="wmnds-fe-radios" role="radiogroup">
<span class="wmnds-fe-radios__desc">
Select all options that apply
</span>
<label class="wmnds-fe-radios__container">
Option 1
<input class="wmnds-fe-radios__input" value="Option 1" checked="checked" name="checkbox-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
<label class="wmnds-fe-radios__container">
Option 2
<input class="wmnds-fe-radios__input" value="Option 2" name="checkbox-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
<label class="wmnds-fe-radios__container">
Option 3
<input class="wmnds-fe-radios__input" value="Option 3" name="checkbox-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
</div>
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/radios/_radios.njk" import wmndsRadios %}
{{
wmndsRadios({
items: [
{
contentText: "Option 1",
contentHTML: null,
value: "option1",
id: null,
checked: false,
name: null,
disabled: false
},
{
contentText: "Option 2",
contentHTML: null,
value: "option2",
id: null,
checked: true,
name: null,
disabled: false
},
{
contentText: "Option 3",
contentHTML: null,
value: "option3",
id: null,
checked: false,
name: null,
disabled: false
}
],
name: "radios-example",
hint: {
contentText: "Select one option",
contentHTML: null,
id: null,
classes: null
},
idPrefix: "radios",
inline: false,
classes: null,
error: false,
errorMessage: {
contentText: "Please select an option",
contentHTML: null,
id: null,
classes: null
}
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| items | array | Required. Array of radio items objects. See items below. |
| name | string | Required. Name attribute for all radio items. |
| hint | object | Options for the hint component (e.g. text). See hint options below. |
| idPrefix | string | String to prefix id for each radio item if no id is specified on each item. If not passed, fall back to using the name option instead. |
| inline | boolean | Determines whether to the display the radios horizontally or vertically. |
| classes | string | Classes to add to the radios container. |
| error | boolean | If true, errorMessage will show. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage options below. |
Options for items
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within each radio item label. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within each radio item label. If contentHTML is provided, the contentText argument will be ignored. |
| value | string | Required. Value for the radio input. |
| id | string | Specific id attribute for the radio item. If omitted, then idPrefix string will be applied. |
| checked | boolean | If true, radio will be checked. |
| name | string | Specific name for the radio item. If omitted, then component global name string will be applied. |
| disabled | boolean | If true, radio will be disabled. |
Options for hint
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| id | string | Optional id attribute to add to the hint span tag. |
| classes | string | Classes to add to the hint span tag. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message |
| id | string | Id attribute to add to the error message span tag. |
| classes | string | Classes to add to the error message span tag. |
Inline Radios
Select all options that apply
HTML markup
<div class="wmnds-fe-group">
<div class="wmnds-fe-radios wmnds-fe-radios--inline" role="radiogroup">
<span class="wmnds-fe-radios__desc">
Select all options that apply
</span>
<label class="wmnds-fe-radios__container">
Option 1
<input class="wmnds-fe-radios__input" value="Option 1" checked="checked" name="inline-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
<label class="wmnds-fe-radios__container">
Option 2
<input class="wmnds-fe-radios__input" value="Option 2" name="inline-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
<label class="wmnds-fe-radios__container">
Option 3
<input class="wmnds-fe-radios__input" value="Option 3" name="inline-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
</div>
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/radios/_radios.njk" import wmndsRadios %}
{{
wmndsRadios({
items: [
{
contentText: "Option 1",
contentHTML: null,
value: "option1",
id: null,
checked: false,
name: null,
disabled: false
},
{
contentText: "Option 2",
contentHTML: null,
value: "option2",
id: null,
checked: true,
name: null,
disabled: false
},
{
contentText: "Option 3",
contentHTML: null,
value: "option3",
id: null,
checked: false,
name: null,
disabled: false
}
],
name: "radios-example",
hint: {
contentText: "Select one option",
contentHTML: null,
id: null,
classes: null
},
idPrefix: "radios",
inline: false,
classes: null,
error: false,
errorMessage: {
contentText: "Please select an option",
contentHTML: null,
id: null,
classes: null
}
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| items | array | Required. Array of radio items objects. See items below. |
| name | string | Required. Name attribute for all radio items. |
| hint | object | Options for the hint component (e.g. text). See hint options below. |
| idPrefix | string | String to prefix id for each radio item if no id is specified on each item. If not passed, fall back to using the name option instead. |
| inline | boolean | Determines whether to the display the radios horizontally or vertically. |
| classes | string | Classes to add to the radios container. |
| error | boolean | If true, errorMessage will show. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage options below. |
Options for items
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within each radio item label. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within each radio item label. If contentHTML is provided, the contentText argument will be ignored. |
| value | string | Required. Value for the radio input. |
| id | string | Specific id attribute for the radio item. If omitted, then idPrefix string will be applied. |
| checked | boolean | If true, radio will be checked. |
| name | string | Specific name for the radio item. If omitted, then component global name string will be applied. |
| disabled | boolean | If true, radio will be disabled. |
Options for hint
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| id | string | Optional id attribute to add to the hint span tag. |
| classes | string | Classes to add to the hint span tag. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message |
| id | string | Id attribute to add to the error message span tag. |
| classes | string | Classes to add to the error message span tag. |
Radio with error
Select all options that apply
HTML markup
<div class="wmnds-fe-group wmnds-fe-group--error">
<div class="wmnds-fe-radios wmnds-fe-radios--inline" role="radiogroup">
<span class="wmnds-fe-error-message">Please select an option</span>
<span class="wmnds-fe-radios__desc">
Select all options that apply
</span>
<label class="wmnds-fe-radios__container">
Option 1
<input class="wmnds-fe-radios__input" value="Option 1" checked="checked" name="inline-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
<label class="wmnds-fe-radios__container">
Option 2
<input class="wmnds-fe-radios__input" value="Option 2" name="inline-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
<label class="wmnds-fe-radios__container">
Option 3
<input class="wmnds-fe-radios__input" value="Option 3" name="inline-example" type="radio" />
<span class="wmnds-fe-radios__checkmark"></span>
</label>
</div>
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/radios/_radios.njk" import wmndsRadios %}
{{
wmndsRadios({
items: [
{
contentText: "Option 1",
contentHTML: null,
value: "option1",
id: null,
checked: false,
name: null,
disabled: false
},
{
contentText: "Option 2",
contentHTML: null,
value: "option2",
id: null,
checked: true,
name: null,
disabled: false
},
{
contentText: "Option 3",
contentHTML: null,
value: "option3",
id: null,
checked: false,
name: null,
disabled: false
}
],
name: "radios-example",
hint: {
contentText: "Select one option",
contentHTML: null,
id: null,
classes: null
},
idPrefix: "radios",
inline: false,
classes: null,
error: false,
errorMessage: {
contentText: "Please select an option",
contentHTML: null,
id: null,
classes: null
}
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| items | array | Required. Array of radio items objects. See items below. |
| name | string | Required. Name attribute for all radio items. |
| hint | object | Options for the hint component (e.g. text). See hint options below. |
| idPrefix | string | String to prefix id for each radio item if no id is specified on each item. If not passed, fall back to using the name option instead. |
| inline | boolean | Determines whether to the display the radios horizontally or vertically. |
| classes | string | Classes to add to the radios container. |
| error | boolean | If true, errorMessage will show. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage options below. |
Options for items
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within each radio item label. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within each radio item label. If contentHTML is provided, the contentText argument will be ignored. |
| value | string | Required. Value for the radio input. |
| id | string | Specific id attribute for the radio item. If omitted, then idPrefix string will be applied. |
| checked | boolean | If true, radio will be checked. |
| name | string | Specific name for the radio item. If omitted, then component global name string will be applied. |
| disabled | boolean | If true, radio will be disabled. |
Options for hint
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| id | string | Optional id attribute to add to the hint span tag. |
| classes | string | Classes to add to the hint span tag. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message |
| id | string | Id attribute to add to the error message span tag. |
| classes | string | Classes to add to the error message span tag. |