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