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