Selection Set is deprecated in SWAN v3.44.0.
Use Checkbox Group, Radio Group or Choice Group instead, which keep native input behavior, support Form components, and use composition instead of fixed skins. See Migration examples for how to replace each variant and skin, and Deprecation for more information.
The preview has been updated.
Use variant to change the behaviour of a Selection Set.
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.
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.
Use skin to change the appearance of a Selection Set.
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.
Use skin="buttons" for a button style Selection Set.
The preview has been updated.
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.
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.
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.
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.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.tileContentsPadding="tight" to create less padding around the text content.tileImagePadding="wide" to add padding around the image.The preview has been updated.
Non-interactive components can be nested inside SelectionSetLabel because they are neutral containers. See an example below using Standard Tiles.
When a nested component inside SelectionSetLabel has a block root element such as Standard Tile, render it and its subcomponents as span inline elements. This is because semantically, label shouldn't nest block level elements.
The preview has been updated.
Use defaultSelectedValue or defaultSelectedValues to assign initial selections. For the Vanilla API, use checked on the input element.
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.
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.
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.
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.
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.
Use aria-required="true" on an input element when a Checkbox or Radio Button is a required field in a form.
You cannot place another form element such as an input tag, inside a SelectionSetLabel or swan-selection-set-label.
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.
Selection Set was deprecated in SWAN 3.44.0, for new use cases, use Checkbox, Checkbox Group, Radio Group, or Choice Group instead, depending on your use case.
This page shows how to migrate common Selection Set uses to the newer components.
variant is replaced by Checkbox Group for multiple selection, Radio Group for single selection, or the selectionMode prop on Choice Group.
variant=”single-select”, replace with Radio Group or Choice Group’s selectionMode=”single”.variant="multi-select", replace with Checkbox Group or Choice Group’s selectionMode="multiple".Checkbox, Checkbox Group, Radio Group, and Choice Group all support Form-related components. For uses of SelectionSetError, replace with FormInputGroup and FormError.
For the standard skin, replace usage with Checkbox Group or Radio Group, depending on the selection mode.
variant=”single-select”, use Radio Group.variant="multi-select", use Checkbox Group.For the simple-column skin, replace usage with Checkbox, Checkbox Group or Radio Group.
variant=”single-select”, use Radio Group.variant="multi-select", use Checkbox Group.For the buttons skin, use Choice Group with ChoiceButtons.
variant=”single-select”, use selectionMode=”single”.variant="multi-select", use selectionMode="multiple".There is no direct replacement for the tiles-horizontal skin and its related components. Instead, use Choice Group with ChoiceCard to recreate something similar. Use fullBleed on ChoiceCard if wanted.
The preview has been updated.
There is no direct replacement for the tiles-vertical skin and its related components. Instead, use Choice Group with ChoiceCard to recreate something similar. Use fullBleed on ChoiceCard if wanted.
Note that ChoiceCard is full width by default, so you will likely want to constrain the width with a GridContainer, FlexBox or custom CSS.
The preview has been updated.
There is no direct replacement for the tiles-mini skin and its related components. Instead, use Choice Group with ChoiceCard to recreate something similar. Use fullBleed on ChoiceCard if wanted.
Note that ChoiceCard is full width by default, so you will likely want to constrain the width with a GridContainer, FlexBox or custom CSS.
The preview has been updated.
For creating interactive Color Swatches, use Choice Group with ChoiceColorSwatches. ChoiceColorSwatch is a replacement for ColorSwatch, and as such does not need as=”span” anymore, nor any of wrapping components.
variant=”single-select”, use selectionMode=”single”.variant="multi-select", use selectionMode="multiple".Choice Group allows you to create your own components using ChoiceCard as a wrapper. Note that ChoiceCard is full width by default, which can be constrained with a component like GridContainer, FlexBox or custom CSS.
Unlike Selection Set, you do not need to modify the nested component for accessibility reasons when using Choice Group.
For nesting a File Tile or any tile component built using Base Tile, use Choice Group with ChoiceTile.
The preview has been updated.
For arbitrary components, use Choice Group with ChoiceCard.
The preview has been updated.
<div>.| prop | type | required | default |
|---|---|---|---|
aria-labelDefines a string value that labels the current element.
Provides a localized accessible label which describes what the Selection Set's purpose is. e.g. "Select your preferred payment method"
@see aria-labelledby. | string | false | null |
aria-labelledbyIdentifies the element (or elements) that labels the current element.
ID of an element whose text content labels the Selection Set. The referenced element's text should be localized. e.g. id of element with text "Select your preferred payment method"
@see aria-describedby. | string | false | null |
skinThe visual style of the SelectionSet | "standard""buttons""simple-column""tiles-horizontal""tiles-vertical""tiles-mini"null | false | standard |
nameThe name of the SelectionSet. Used to group options together | stringnull | false | null |
variantThe variant of SelectionSet
`single-select` where only one option can be selected.
`multi-select` where more than one option can be selected at once. | "single-select""multi-select"null | false | single-select |
imageWidthThe image width | "fixed""proportional"null | false | fixed |
imageVerticalAlignmentHow images should be aligned vertically | "center""cover""top"null | false | cover |
tileContentsPaddingPadding for tile contents | "standard""tight"null | false | standard |
tileImagePaddingPadding for tile image | "standard""wide"null | false | standard |
selectedValue'value' of currently selected button. Used when controlling the state of the component | SelectedValue | false | null |
defaultSelectedValueThe default selected value of the selection set. Used when not controlling the state of the component | SelectedValue | false | null |
onSelectedValueChangeCallback fired when selected option is changed.
`event` is the input's onChange event | ((selectedValue: SelectedValue, event: ChangeEvent<HTMLInputElement, Element>) => void)null | false | null |
selectedValuesList of 'values' of currently selected options. | SelectedValuesnull | false | null |
defaultSelectedValuesDefault selection option values. Used when not controlling the state of the component | SelectedValuesnull | false | null |
onSelectedValuesChangeCallback fired when one of the selections' value changes.
It is passed the updated list of `selectedValues` and the actual `<input>` event in case you need it. | ((newSelectedValues: SelectedValues, event: ChangeEvent<HTMLInputElement, Element>) => void)null | false | null |
<input>.| prop | type | required | default |
|---|---|---|---|
value | string | true | null |
| Component | Renders | Notes |
|---|---|---|
SelectionSetError | <p> | |
SelectionSetLabel | <label> | |
SelectionSetTileContents | <div> | |
SelectionSetTileDescription | <p> | |
SelectionSetTileImageContainer | <div> | |
SelectionSetTileName | <p> | |
SelectionSetTilePrice | <div> |
