Radio

Demo

For additional information about forms and its common elements see Form.

Name	Description
`<fieldset role="radiogroup">`	Standard HTML tag, accepts grouped radio buttons as content
`<input type="radio">`	Standard HTML tag, no content

Name	Description
`div.input-desc`	Optional description. Place this directly after the radio group `fieldset`.
`div.input-msg`	Optional validation message shown only when radio group `fieldset` has class `error`, `warning`, `success`. Place this after the form element and any `.input-desc` text.
`legend.required`	Styles a required fieldset's `legend`.
`legend.disabled`	Styles a disabled fieldset's `legend`.
`fieldset.success`	Shows `input-msg` with success styling.
`fieldset.warning`	Shows `input-msg` with warning styling.
`fieldset.error`	Shows `input-msg` with error styling.

In addition to the attributes documented here, all standard attributes apply. See MDN <input type="radio"> Attributes for official docs.

Name	Value	Required	Description
`disabled`	Boolean attribute		This attribute will give the radio button disabled styling and set `pointer-events` to `none`, but it will not prevent other radio buttons in the radio group from being selected. If a disabled radio button needs to retain its `checked` state, you must disable all the radio buttons in its group.
`readonly`	Boolean attribute		This attribute will give the radio button read-only styling, but it will not prevent other radio buttons in the radio group from being selected, and it will not disable the button. Use this attribute in conjunction with the `disabled` attribute. If a read-only radio button needs to retain its `checked` state, you must give the `readonly` and `disabled` attributes to all the radio buttons in its group.

Assign the radiogroup role to a fieldset containing radio buttons; also use the aria-labelledby attribute on the fieldset.

Design resources can be found on the Skylab design documentation site: skylab.avalara.com