Visual Framework
Visual Framework
The vf-form__radio can be used when a site visitor has a choice of options but can only pick one.
Use a group of vf-form__radio when you have a set of options for the site visitor but you only want them to be able to pick one.
Do not use the vf-form__radio when you only want the site visitor to pick one option from the options. For this use case you should only used the vf-radio button component.
A vf-form__radio must be accompanied by a vf-form__label inside a vf-form__item with the vf-form__item--radii variant.
You can also use the vf-form__helper to add some more descriptive, explanitory text under the vf-form__label. See the examples for the correct markup.
The .vf-form__radio needs to grouped into a vf-form__fieldset and using the vf-form__label to help the site visitor understand what they are choosing for.
Generally the vf-form__fieldset will use the vf-stack layout component to stack the vf-form__radio on top of each other. You can set these to be inline by using the vf-cluster layout component as well. See the examples for the correct markup.
Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.
includeYou'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "form",
"radio_legend": {
"legend__text": "Which do you like?"
},
"required": true,
"radio_name": "newsletter",
"radio_value": "commit",
"radio_label": {
"form__label": "By selecting this radio you agree you like pizza.",
"form__label_for": "commit-to-newsletters"
}
}
%}
{% include "../path_to/vf-form__radio/vf-form__radio.njk" %}
renderThis approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.
{% render '@vf-form__radio', {
"component-type": "form",
"radio_legend": {
"legend__text": "Which do you like?"
},
"required": true,
"radio_name": "newsletter",
"radio_value": "commit",
"radio_label": {
"form__label": "By selecting this radio you agree you like pizza.",
"form__label_for": "commit-to-newsletters"
}
} %}
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="newsletter" value="commit" id="commit-to-newsletters" class="vf-form__radio">
<label for="commit-to-newsletters" class="vf-form__label">By selecting this radio you agree you like pizza.</label>
</div>
Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.
includeYou'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "form",
"radio_legend": {
"legend__text": "Which do you like?"
},
"item_01": {
"radio_value": "Apples",
"radio_name": "fruits",
"radio_label": {
"form__label": "Apples",
"form__label_for": 1
},
"radio_helper": {
"helper_text": "Some text to help with things"
}
},
"item_02": {
"radio_value": "Bananas",
"radio_name": "fruits",
"radio_label": {
"form__label": "Bananas",
"form__label_for": 2
}
},
"item_03": {
"radio_value": "Mangos",
"radio_name": "fruits",
"radio_label": {
"form__label": "Mangos",
"form__label_for": 3
}
},
"item_04": {
"radio_value": "Oranges",
"radio_name": "fruits",
"radio_label": {
"form__label": "Oranges",
"form__label_for": 4
}
},
"item_05": {
"radio_value": "Pears",
"radio_name": "fruits",
"radio_label": {
"form__label": "Pears",
"form__label_for": 5
},
"disabled": true
},
"item_06": {
"radio_value": "Strawberries",
"radio_name": "fruits",
"radio_label": {
"form__label": "Strawberries",
"form__label_for": 6
}
}
}
%}
{% include "../path_to/vf-form__radio/vf-form__radio.njk" %}
renderThis approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.
{% render '@vf-form__radio', {
"component-type": "form",
"radio_legend": {
"legend__text": "Which do you like?"
},
"item_01": {
"radio_value": "Apples",
"radio_name": "fruits",
"radio_label": {
"form__label": "Apples",
"form__label_for": 1
},
"radio_helper": {
"helper_text": "Some text to help with things"
}
},
"item_02": {
"radio_value": "Bananas",
"radio_name": "fruits",
"radio_label": {
"form__label": "Bananas",
"form__label_for": 2
}
},
"item_03": {
"radio_value": "Mangos",
"radio_name": "fruits",
"radio_label": {
"form__label": "Mangos",
"form__label_for": 3
}
},
"item_04": {
"radio_value": "Oranges",
"radio_name": "fruits",
"radio_label": {
"form__label": "Oranges",
"form__label_for": 4
}
},
"item_05": {
"radio_value": "Pears",
"radio_name": "fruits",
"radio_label": {
"form__label": "Pears",
"form__label_for": 5
},
"disabled": true
},
"item_06": {
"radio_value": "Strawberries",
"radio_name": "fruits",
"radio_label": {
"form__label": "Strawberries",
"form__label_for": 6
}
}
} %}
<fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
<legend class="vf-form__legend">Which do you like?</legend>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Apples" id="1" class="vf-form__radio">
<label for="1" class="vf-form__label">Apples</label>
<p class="vf-form__helper">Some text to help with things</p>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Bananas" id="2" class="vf-form__radio">
<label for="2" class="vf-form__label">Bananas</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Mangos" id="3" class="vf-form__radio">
<label for="3" class="vf-form__label">Mangos</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Oranges" id="4" class="vf-form__radio">
<label for="4" class="vf-form__label">Oranges</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Pears" id="5" class="vf-form__radio" disabled>
<label for="5" class="vf-form__label">Pears</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Strawberries" id="6" class="vf-form__radio">
<label for="6" class="vf-form__label">Strawberries</label>
</div>
</fieldset>
Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.
includeYou'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "form",
"radio_legend": {
"legend__text": "Which do you like?"
},
"radio_name": "peter",
"inline": true,
"item_01": {
"radio_value": "Apples",
"radio_name": "fruits",
"radio_label": {
"form__label": "Apples",
"form__label_for": "fruit_01"
},
"radio_helper": {
"helper_text": "Some text to help with things"
}
},
"item_02": {
"radio_value": "Bananas",
"radio_name": "fruits",
"radio_label": {
"form__label": "Bananas",
"form__label_for": "fruit_02"
}
},
"item_03": {
"radio_value": "Mangos",
"radio_name": "fruits",
"radio_label": {
"form__label": "Mangos",
"form__label_for": "fruit_03"
}
},
"item_04": {
"radio_value": "Oranges",
"radio_name": "fruits",
"radio_label": {
"form__label": "Oranges",
"form__label_for": "fruit_04"
}
},
"item_05": {
"radio_value": "Pears",
"radio_name": "fruits",
"radio_label": {
"form__label": "Pears",
"form__label_for": "fruit_05"
},
"disabled": true
},
"item_06": {
"radio_value": "Strawberries",
"radio_name": "fruits",
"radio_label": {
"form__label": "Strawberries",
"form__label_for": "fruit_06"
}
}
}
%}
{% include "../path_to/vf-form__radio/vf-form__radio.njk" %}
renderThis approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.
{% render '@vf-form__radio', {
"component-type": "form",
"radio_legend": {
"legend__text": "Which do you like?"
},
"radio_name": "peter",
"inline": true,
"item_01": {
"radio_value": "Apples",
"radio_name": "fruits",
"radio_label": {
"form__label": "Apples",
"form__label_for": "fruit_01"
},
"radio_helper": {
"helper_text": "Some text to help with things"
}
},
"item_02": {
"radio_value": "Bananas",
"radio_name": "fruits",
"radio_label": {
"form__label": "Bananas",
"form__label_for": "fruit_02"
}
},
"item_03": {
"radio_value": "Mangos",
"radio_name": "fruits",
"radio_label": {
"form__label": "Mangos",
"form__label_for": "fruit_03"
}
},
"item_04": {
"radio_value": "Oranges",
"radio_name": "fruits",
"radio_label": {
"form__label": "Oranges",
"form__label_for": "fruit_04"
}
},
"item_05": {
"radio_value": "Pears",
"radio_name": "fruits",
"radio_label": {
"form__label": "Pears",
"form__label_for": "fruit_05"
},
"disabled": true
},
"item_06": {
"radio_value": "Strawberries",
"radio_name": "fruits",
"radio_label": {
"form__label": "Strawberries",
"form__label_for": "fruit_06"
}
}
} %}
<fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
<legend class="vf-form__legend">Which do you like?</legend>
<div class="vf-cluster vf-cluster--400">
<div class="vf-cluster__inner">
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Apples" id="fruit_01" class="vf-form__radio">
<label for="fruit_01" class="vf-form__label">Apples</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Bananas" id="fruit_02" class="vf-form__radio">
<label for="fruit_02" class="vf-form__label">Bananas</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Mangos" id="fruit_03" class="vf-form__radio">
<label for="fruit_03" class="vf-form__label">Mangos</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Oranges" id="fruit_04" class="vf-form__radio">
<label for="fruit_04" class="vf-form__label">Oranges</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Pears" id="fruit_05" class="vf-form__radio" disabled>
<label for="fruit_05" class="vf-form__label">Pears</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Strawberries" id="fruit_06" class="vf-form__radio">
<label for="fruit_06" class="vf-form__label">Strawberries</label>
</div>
</div>
</div>
</fieldset>
This component is distributed with npm. After installing npm, you can install the vf-form__radio with this command.
$ yarn add --dev @visual-framework/vf-form__radio
The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.
@import "@visual-framework/vf-form__radio/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
set- style functions to cleaner version
File system location: components/vf-form__radio
Find an issue on this page? Propose a change or discuss it.