CardSelectCreditScore

Status: Stable

Latest released: February 2020

Current version: v1.1.0

Storybook
GitHub

CardSelectCreditScore presents a default set of credit score values, and enables pods to update the values per their use cases.

  • Spacing and card styling adapts for mobile web
  • Intended for single select use cases
  • When multiple selections are required, use Checkbox or pose the question in two parts using disabled to indicate the previous selection

Variants

Default

Disabled

Development

import CardSelectCreditScore from '@nerdwallet/react-input-credit-score/card-select';
<CardSelectCreditScore />;

Props

<CardSelectCreditScore>

options

Array<Object>

A list of options for each individual option Card.

Array<{
disabled: bool
label: node Required
value: string | number | bool Required
}>

Default

[
  {
    label: (
      <Body component="div">
        Excellent
        <Body size="small">720 - 850</Body>
      </Body>
    ),
    value: 1,
  },
  {
    label: (
      <Body component="div">
        Good <Body size="small"> 690 - 719</Body>
      </Body>
    ),
    value: 2,
  },
  {
    label: (
      <Body component="div">
        Average <Body size="small"> 630 - 689</Body>
      </Body>
    ),
    value: 3,
  },
  {
    label: (
      <Body component="div">
        Poor <Body size="small"> 350 - 629</Body>
      </Body>
    ),
    value: 4,
  },
]

disabled

boolean

Boolean flag to indicate whether the options should be unselectable.

Default

false

onChange

Function

Func to be called when a card is selected.

Default

() => {}