Choices

Choices is a more visual equivalent to the Radio buttons. There are two variants: choices-binary and choices-multiple.

Choices-binary

Choices-binary allow users to select one out of the two available options.

Choices-multiple

Choices-multiple allow users to select exactly one out of multiple available options.

Compact-choices-multiple

Compact-choices-multiple allow users to select exactly one out of multiple available options but with a more compact appearance

Configurations

Choice description

This adds a description under the label text of the choice

`imageURL`

Path of an image to be shown in the choice panel. All images within the choices component must be the same dimensions.

`imageStates`

Specify active and inactive images based on whether a choice panel is selected / unselected

Note: If imageStates or imageURL prop is not provided, then the choice panel is rendered only with the label text.

`gridCols`

Number from 1-3 to specify how many columns the choices should be in

`gridGap`

Specify the space between each grid element

If you require different values to be used for different breakpoints, you can also pass an object with keys s, m, l, _ - where _ is a default value, and the other keys are optional corresponding to small, medium and large breakpoints

`label`

Text for the choice label

`id`

An id for the choice input

`value`

A value for the choice input

`legend`

A caption for the choice panel

`onChange`

A change handler for the choice panel

`textOnRight`

String for some text on the right

Props for Compact Multiple Choice only

`centreTextAlign`

Boolean to centre the text in the choice radio buttons

`imageOnLeft`

Boolean to move the image in the radio button to the left side of the button