CardSelect

Status: Stable

Latest released: February 2020

Current version: v2.5.0

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

Option 1

Option 2

Option 3

Open in Playroom

() => {
  const [value, setValue] = React.useState(null);
  const toggleValue = value => setValue(value);
  return (
    <CardSelect
      onChange={toggleValue}
      value={value}
      options={[
        {
          label: 'Option 1',
          value: 1,
        },
        {
          label: 'Option 2',
          value: 2,
        },
        {
          label: 'Option 3',
          value: 3,
        },
      ]}
    />
  );
};

Disabled

Option 1

Option 2

Option 3

Open in Playroom

<CardSelect
  options={[
    {
      label: 'Option 1',
      value: 1,
      disabled: true,
    },
    {
      label: 'Option 2',
      value: 2,
      disabled: true,
    },
    {
      label: 'Option 3',
      value: 3,
      disabled: true,
    },
  ]}
/>

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.

className

string

Classes to apply to the component.

disabled

boolean

Flag to indicate if the options should not be selectable.

options

Array<Object>

Required

A list of options for each individual Card.

Array<{

disabled: bool

label: node Required

value: string | number | bool Required

name

string

Name attribute for <input> elements.

onChange

Function

Callback to be called when the selected value(s) change.

value

string | number | boolean

The currently selected value.

dangerouslyForceFocusStyling

boolean

Force the component to use its focus styles.

dangerouslyForceHoverStyling

boolean

Force the component to use its hover styles.

dangerouslyForceActiveStyling

boolean

Force the component to use its clicked or pressed styles.

dangerouslyForceSelectedStyling

boolean

Force the component to use its selected styles.