Radio form

An input that that allows the site visitor to select only one option in a group.

github location npm version

Usage

The vf-form__radio can be used when a site visitor has a choice of options but can only pick one.

When to use

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.

When not to use

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.

Implementation

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.

Variants

Default variant

Nunjucks syntax

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.

Using include

You'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" : [object Object],
"required" : true,
"radio_name" : "newsletter",
"radio_value" : "commit",
"radio_label" : [object Object],
 }
%}
{% include "../path_to/vf-form__radio/vf-form__radio.njk" %}

Using render

This 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" : [object Object],
  "required" : true,
  "radio_name" : "newsletter",
  "radio_value" : "commit",
  "radio_label" : [object Object],}
%}
HTML 
<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>

Stacked Group Example variant

Which do you like?

Some text to help with things

Nunjucks syntax

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.

Using include

You'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" : [object Object],
"item_01" : [object Object],
"item_02" : [object Object],
"item_03" : [object Object],
"item_04" : [object Object],
"item_05" : [object Object],
"item_06" : [object Object],
 }
%}
{% include "../path_to/vf-form__radio/vf-form__radio.njk" %}

Using render

This 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" : [object Object],
  "item_01" : [object Object],
  "item_02" : [object Object],
  "item_03" : [object Object],
  "item_04" : [object Object],
  "item_05" : [object Object],
  "item_06" : [object Object],}
%}
HTML 
<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>

Clustered Group Example variant

Which do you like?
Nunjucks syntax

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.

Using include

You'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" : [object Object],
"radio_name" : "peter",
"inline" : true,
"item_01" : [object Object],
"item_02" : [object Object],
"item_03" : [object Object],
"item_04" : [object Object],
"item_05" : [object Object],
"item_06" : [object Object],
 }
%}
{% include "../path_to/vf-form__radio/vf-form__radio.njk" %}

Using render

This 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" : [object Object],
  "radio_name" : "peter",
  "inline" : true,
  "item_01" : [object Object],
  "item_02" : [object Object],
  "item_03" : [object Object],
  "item_04" : [object Object],
  "item_05" : [object Object],
  "item_06" : [object Object],}
%}
HTML 
<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>

Examples

Installation info

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

Sass/CSS

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

Changelog

Changelog

3.0.0

3.0.0-alpha.0

  • reworks the inputs to make more use of nunjucks
  • restyles the inputs to match latest design direction
  • adds better documentation

2.0.3

  • Fixes CSS to match stylelint rules.
  • https://github.com/visual-framework/vf-core/pull/1405

2.0.2

  • changes any set- style functions to cleaner version

2.0.1

  • improve horizontal layout of radio with flexbox

2.0.0

  • Changes hover/focus interaction.
  • Adds inline example.
  • https://github.com/visual-framework/vf-core/pull/1228/

1.0.0

  • repositions the input and it's label so they're more horizontally in line

1.0.0-alpha.8

  • Version bump only for package @visual-framework/vf-form__radio

1.0.0-alpha.7

  • Version bump only for package @visual-framework/vf-form__radio

Assets


File system location: components/vf-form__radio

Find an issue on this page? Propose a change or discuss it.