CardSelect components present a list of options for a user to choose from. The option selected influences or changes the experience. Users can select a single option from the list. This iteration deprecates the multiple prop until usability issues are resolved. Please reach out for more details.
Best practices
- Use a balance of Radio, CardSelect, and Select to help users make choices and provide info with ease.
- Present CardSelect options via progressive disclosure to help a user focus on the many options available.
- Include a minimum of two options when implementing CardSelect
Variants
Default
Disabled
Development
import CardSelect from '@nerdwallet/react-card-select';<CardSelect onChange={updateValue} options={[{ label: 'Option 1', value: 1 }]} value={value}/>;Props
<CardSelect>
autoFocus
boolean
Automatically give focus to the selected card, or the first card if no card is selected. This prop should be used sparingly, as it poses significant accessibility concerns for individuals using screen readers. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus for more information.
Default
false
className
string
Classes to apply to the component.
Default
null
disabled
boolean
Flag to indicate if the options should not be selectable.
Default
false
options
Array<Object>
A list of options for each individual Card.
Array<{name
string
Name attribute for <input> elements.
Default
null
onChange
Function
Callback to be called when the selected value(s) change.
value
string | number | boolean
The currently selected value.
Default
null
dangerouslyForceFocusStyling
boolean
Force the component to use its focus styles.
Default
false
dangerouslyForceHoverStyling
boolean
Force the component to use its hover styles.
Default
false
dangerouslyForceActiveStyling
boolean
Force the component to use its clicked or pressed styles.
Default
false
dangerouslyForceSelectedStyling
boolean
Force the component to use its selected styles.
Default
false