Form Radio component
AboutAn input that that allows the site visitor to select only one option in a group.
vf-form__radiocan be used when a site visitor has a choice of options but can only pick one.
When to useUse a group of
vf-form__radiowhen you have a set of options for the site visitor but you only want them to be able to pick one.
When not to useDo not use the
vf-form__radiowhen 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.
vf-form__radiomust be accompanied by a
You can also use the
vf-form__helperto add some more descriptive, explanitory text under the
vf-form__label. See the examples for the correct markup.
.vf-form__radioneeds to grouped into a
vf-form__fieldsetand using the
vf-form__labelto help the site visitor understand what they are choosing for.
vf-form__fieldsetwill use the
vf-stacklayout component to stack the
vf-form__radioon top of each other. You can set these to be inline by using the
vf-clusterlayout component as well. See the examples for the correct markup.
InstallThis component is distributed with npm. After installing npm, you can install the
vf-form__radiowith this command.
$ yarn add --dev @visual-framework/vf-form__radio
Sass/CSSThe source files included are written in Sass(
scss). You can point your Sass
node_modulesdirectory and import it like this.
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the