Radio

Generates a radio input field. There are various different options available to control the position of the radio and labels.

Example usage

{{
    form.radio({
        'label': 'Default radio',
        'id': 'foo',
        'name': 'bar'
    })
}}

See the Pen docs - form - radio by Pulsar (@pulsar) on CodePen.

Options applied to parent wrapper

Option Type Description
class string A space separated list of class names
guidance string Text to be displayed in a popover, adds a (?) icon after the input
guidance-container string Element to bind guidance popover scroll behaviour to (default body)
help string Additional guidance information to be displayed next to the input
label string Text for the <label> companion element
required bool Visually indicates that the field must be completed

Options applied to input

Option Type Description
form string Specific one or more forms this label belongs to
id string A unique identifier, if required
name string The name of this control
required bool Adds required and aria-required="true" attributes
selected bool Whether the input is checked
value string Specifies the value of the input
data-* string Data attributes, eg: 'data-foo': 'bar'

Any other options not listed here will be applied to the input.

Error state

{{
    form.radio({
        'label': 'Default radio',
        'error': 'Something went wrong',
        ...

See the Pen docs - form - radio error by Pulsar (@pulsar) on CodePen.

Label alignment

Labels follow the regular Pulsar form flow and are positioned down the left. Clicking the label will toggle the input.

{{
    form.radio({
        'label': 'Default radio',
        'id': 'foo',
        'name': 'bar'
    })
}}

See the Pen docs - form - radio by Pulsar (@pulsar) on CodePen.

Radio inline

Creates a

Option Type Description
input_placement string left (default), right position of the input vs the label value 
{{
    form.radio_inline({
        'label': 'Radio inline',
        'id': 'foo',
        'name': 'bar'
    })
}}

See the Pen docs - form - radio right label by Pulsar (@pulsar) on CodePen.

{{
    form.radio_inline({
        'label': 'Radio on the right',
        'id': 'foo',
        'name': 'foo',
        'input_placement': 'right'
    })
}}

See the Pen docs - form - radio inline right by Pulsar (@pulsar) on CodePen.

Indented radio

Using form.radio_inline will cause the radio input to not follow the normal flow of a regular pulsar form, if you want to maintain form alignment, use the form__group--indent class to restore the position.

See the Pen docs - form - radio indented by Pulsar (@pulsar) on CodePen.

Alternative styling

Depending on your UI needs, you can display radios as choice blocks or button groups. See their documentation for further details.

Choice block

See the Pen docs - form - checkbox choice block by Pulsar (@pulsar) on CodePen.

Button group

See the Pen docs - form - checkbox button group by Pulsar (@pulsar) on CodePen.

results matching ""

    No results matching ""