<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Selection Set

A set of options to choose from.
styleKeys: selectionSet

Use Selection Set...

  • As a form input that presents separate options that can be selected.
  • As a set of Radio Buttons or Checkboxes with labels and spacing included.

Don't use Selection Set...

The preview has been updated.

Variant

Use variant to change the behaviour of a Selection Set.

Single select

Use variant="single-select" when only one value may be selected at a time. Selection Set will act as a Radio Button set.

The preview has been updated.

Multi-select

Use variant="multi-select" when multiple values may be selected at a time. Selection Set will act as a Checkbox set.

The preview has been updated.

Skin

Use skin to change the appearance of a Selection Set.

Simple Column

Use skin="simple-column" for a Radio Button or Checkbox style Selection Set. This adds labels and the correct spacing to Radio Button and Checkbox and is the intended way for these components to be used most of the time.

The preview has been updated.

The preview has been updated.

Use skin="simple-column" for a single Checkbox with a label and the correct spacing.

The preview has been updated.

Buttons

Use skin="buttons" for a button style Selection Set.

The preview has been updated.

Tiles horizontal

Use skin="tiles-horizontal" for a tile-based Selection Set with horizontally-positioned content. The images are wrapped in a SelectionSetTileImageContainer element and must be a FluidImage component.

The preview has been updated.

Tiles vertical

Use skin="tiles-vertical" for a tile based Selection Set with vertically positioned content. The images are wrapped in a SelectionSetTileImageContainer element and must be a FluidImage component.

The preview has been updated.

Tiles mini

Use skin="tiles-mini" for a tile based Selection Set that is more visually compact. The images are wrapped in a SelectionSetTileImageContainer element and must be a FluidImage component.

The preview has been updated.

Tile Mini has some other optional features that can be used to adjust its presentation.

  • Use imageWidth="proportional" to make the width of the image proportional to the tile. The image will be about a 33% as wide as the tile, with a max of 200px.
  • Use imageVerticalAlignment="center" to make the image vertically centered instead of filling the image area. The image will not be cropped and will resize the height of the tile if necessary.
  • Use tileContentsPadding="tight" to create less padding around the text content.
  • Use tileImagePadding="wide" to add padding around the image.

The preview has been updated.

Nesting components

Non-interactive components can be nested inside SelectionSetLabel because they are neutral containers. See an example below using Standard Tiles.

The preview has been updated.

Default value

Use defaultSelectedValue or defaultSelectedValues to assign initial selections. For the Vanilla API, use checked on the input element.

Share
Share

Error messaging

Use SelectionSetError to provide an error message on a Selection Set.

When a Selection Set has an error, each input should have aria-describedby and aria-errormessage attributes whose value is the id of the error message. The error message should not be a label tag with a for attribute pointing to the input.

The preview has been updated.

Controlled

Single select

Use selectedValue and onSelectedValueChange in order to control the state of a single-select Selection Set in React. onSelectedValueChange will be invoked with the new value as the first argument and the actual input event as the second arg in case you need it.

Share

Multi-select

Use selectedValues and onSelectedValuesChange in order to control the state of a multi-select Selection Set in React. selectedValues is an object { [value: string]: boolean} which represents which values are selected and which are not. If a value is omitted from the object, it will be considered unselected. onSelectedValuesChange will be invoked with the new value as the first arg and the actual input event as the second arg in case you need it.

Share

Implementation

Accessible label

The outermost element must have an accessible label such as aria-labelledby with the title of the Selection Set. If the Selection Set does not have a visible title, use aria-label on the outermost element instead. This label must be localized.

Accessible role

For vanilla JS, if there is more than one input in the Selection Set, the outermost element must also have a role attribute. Use role="radiogroup" if it is a single-select variant. Use role="group" if it is a multi-select variant.

Required fields

Use aria-required="true" on an input element when a Checkbox or Radio Button is a required field in a form.

Input inside label

You cannot place another form element such as an input tag, inside a SelectionSetLabel or swan-selection-set-label.

Grid

The outermost Selection Set element can be combined with a Grid row element, if the selections that the user is choosing from are spread out among the columns inside that row. For instance, if you are presenting a row of Standard Tiles to choose from, the grid row can also act as the Selection Set.

We don't have any guidelines for Selection Set yet but reach out to us with the questions you'd like answered or if you'd like to contribute any guidelines.

Props

SelectionSet
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
namestring | nullfalse
The name of the SelectionSet. Used to group options together
null
skin"standard" | "buttons" | "simple-column" | "tiles-horizontal" | "tiles-vertical" | "tiles-mini" | nullfalse
The visual style of the SelectionSet Available options: "standard", "buttons", "simple-column", "tiles-horizontal", "tiles-vertical", "tiles-mini"
standard
selectedValuestring | nullfalse
Selected value for single select variant
null
defaultSelectedValuestring | nullfalse
Default selected value for single select variant
null
onSelectedValueChange((selectedValue: SelectedValue, event: ChangeEvent<HTMLInputElement>) => void) | nullfalse
Callback function for handling single select variant value selection events
null
imageWidth"fixed" | "proportional" | nullfalse
The image width Available options: "fixed", "proportional"
null
imageVerticalAlignment"center" | "top" | "cover" | nullfalse
How images should be aligned vertically Available options: "cover", "top", "center"
null
tileContentsPadding"standard" | "tight" | nullfalse
Padding for tile contents Available options: "standard", "tight"
null
tileImagePadding"standard" | "wide" | nullfalse
Padding for tile image Available options: "standard", "wide"
null
variant"single-select" | "multi-select" | nullfalse
`single-select` where only one option can be selected. `multi-select` where more than one option can be selected at once.
single-select
selectedValues{ [x: string]: boolean; } | nullfalse
Selected values for multi select variant
null
defaultSelectedValues{ [x: string]: boolean; } | nullfalse
Default selected value for multi select variant
null
onSelectedValuesChange((newSelectedValues: SelectedValues, event: ChangeEvent<HTMLInputElement>) => void) | nullfalse
Callback function for handling multi select variant value selection events
null
SelectionSetError
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SelectionSetInput
This component is implemented using the <input /> as the root element. You can utilize the native attributes supported by <input /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SelectionSetLabel
This component is implemented using the <label /> as the root element. You can utilize the native attributes supported by <label /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SelectionSetTileContents
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SelectionSetTileDescription
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SelectionSetTileImageContainer
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SelectionSetTileName
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SelectionSetTilePrice
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Related

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.

Published: Jan 13, 2022Last updated: Oct 17, 2024
Previous
Search Input
Search Input
Next
Skeleton Text
Skeleton Text