Selectable Card

Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.

Default

Default Selectable Cards are multi select by default.

import React, { useState } from 'react'
import SelectableCard from 'playbook-ui'

const SelectableCardDefault = (props) => {
  const [selectedWithIcon, setSelectedWithIcon] = useState(true)
  const [selectedNoIcon, setSelectedNoIcon] = useState(true)
  const [unselected, setUnselected] = useState(false)
  const [disabled, setDisabled] = useState(false)

  return (
    <div className="pb--doc-demo-row">

      <SelectableCard
          checked={selectedWithIcon}
          icon
          inputId="selectedWithIcon"
          name="selectedWithIcon"
          onChange={() => setSelectedWithIcon(!selectedWithIcon)}
          value="selectedWithIcon"
      >
        {'Selected, with icon'}
      </SelectableCard>

      <SelectableCard
          checked={selectedNoIcon}
          inputId="selectedWithoutIcon"
          name="selectedWithoutIcon"
          onChange={() => setSelectedNoIcon(!selectedNoIcon)}
          value="selectedWithoutIcon"
      >
        {'Selected, without icon'}
      </SelectableCard>

      <SelectableCard
          checked={unselected}
          inputId="unselected"
          name="unselected"
          onChange={() => setUnselected(!unselected)}
          value="unselected"
      >
        {'Unselected'}
      </SelectableCard>

      <SelectableCard
          checked={disabled}
          disabled
          inputId="disabled"
          name="disabled"
          onChange={() => setDisabled(!disabled)}
          value="disabled"
      >
        {'Disabled'}
      </SelectableCard>

    </div>
  )
}

export default SelectableCardDefault

Single Select

Single Select allows only one selectable card in the set to be selected.

import React, { useState } from 'react'
import SelectableCard from 'playbook-ui'

const SelectableCardSingleSelect = (props) => {
  const [selected, setSelected] = useState(null)
  const handleSelect = (event) => {
    setSelected(event.target.value)
  }

  return (
    <div className="pb--doc-demo-row">

      <SelectableCard
          checked={selected === 'male'}
          inputId="male1"
          multi={false}
          name="gender"
          onChange={handleSelect}
          value="male"
      >
        {'Male'}
      </SelectableCard>

      <SelectableCard
          checked={selected === 'female'}
          inputId="female1"
          multi={false}
          name="gender"
          onChange={handleSelect}
          value="female"
      >
        {'Female'}
      </SelectableCard>

      <SelectableCard
          checked={selected === 'other'}
          inputId="other1"
          multi={false}
          name="gender"
          onChange={handleSelect}
          value="other"
      >
        {'Other'}
      </SelectableCard>

    </div>
  )
}

export default SelectableCardSingleSelect

Block

Selectable Cards can pass text or block content.

import React, { useState } from 'react'

import SelectableCard from 'playbook-ui'

import Body from 'playbook-ui'
import Title from 'playbook-ui'

const SelectableCardBlock = (props) => {
  const [block, setBlock] = useState(true)
  const [tag, setTag] = useState(false)

  const handleSelect = (event) => {
    setBlock(event.target.checked)
  }

  const handleTag = (event) => {
    setTag(event.target.checked)
  }

  return (
    <div className="pb--doc-demo-row">
      <SelectableCard
          checked={block}
          inputId="block"
          name="block"
          onChange={handleSelect}
          value="block"
      >
        <Title
            size={4}
            text="Block"
        />
        <Body
            tag="span"
        >
          {'This uses block'}
        </Body>
      </SelectableCard>

      <SelectableCard
          checked={tag}
          inputId="tag"
          name="tag"
          onChange={handleTag}
          text="This passes text through the tag"
          value="tag"
      />
    </div>
  )
}

export default SelectableCardBlock

Image Example

Selectable Cards can pass images with optional text.

import React, { useState } from 'react'

import Body from 'playbook-ui'
import Image from 'playbook-ui'
import SelectableCard from 'playbook-ui'

const SelectableCardImage = (props) => {
  const [selectedImage, setSelectedImage] = useState(true)
  const [unselectedImage, setUnselectedImage] = useState(false)

  return (
    <div className="pb--doc-demo-row">

      <SelectableCard
          checked={selectedImage}
          icon
          inputId="selectableImage"
          name="selectableImage"
          onChange={() => setSelectedImage(!selectedImage)}
          value="selectableImage"
      >
        <Image
            rounded
            size="xl"
            url="https://unsplash.it/500/400/?image=634"
        />

        <Body>{'Add text here'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={unselectedImage}
          icon
          inputId="unselectedImage"
          name="unselectedImage"
          onChange={() => setUnselectedImage(!unselectedImage)}
          value="unselectedImage"
      >
        <Image
            rounded
            size="xl"
            url="https://unsplash.it/500/400/?image=634"
        />
      </SelectableCard>

    </div>
  )
}

export default SelectableCardImage

Input Variant

Selectable Cards can show an input indicating state.

import React, { useState } from 'react'

import Body from 'playbook-ui'
import SelectableCard from 'playbook-ui'
import Title from 'playbook-ui'

const SelectableCardInput = (props) => {
  const [state, setState] = useState({
    firstCheckbox: true,
    secondCheckbox: true,
    thirdCheckbox: false,
    forthCheckbox: false,
    radioSelected: 'first',
  })

  const handleSelect = (event) => {
    setState({ ...state,
      [event.target.name]: event.target.checked,
    })
  }

  const handleRadioSelect = (event) => {
    setState({
      ...state,
      radioSelected: event.target.value,
    })
  }

  return (
    <>
      <Title
          size={3}
          text="What programming languages do you know?"
      />

      <br />

      <SelectableCard
          checked={state.firstCheckbox}
          inputId="firstCheckbox"
          name="firstCheckbox"
          onChange={handleSelect}
          value="firstCheckbox"
          variant="displayInput"
      >
        <Body>{'Ruby'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={state.secondCheckbox}
          inputId="secondCheckbox"
          name="secondCheckbox"
          onChange={handleSelect}
          value="secondCheckbox"
          variant="displayInput"
      >
        <Body>{'JavaScript'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={state.thirdCheckbox}
          inputId="thirdCheckbox"
          name="thirdCheckbox"
          onChange={handleSelect}
          value="thirdCheckbox"
          variant="displayInput"
      >
        <Body>{'TypeScript'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={state.fourthCheckbox}
          inputId="fourthCheckbox"
          name="fourthCheckbox"
          onChange={handleSelect}
          value="fourthCheckbox"
          variant="displayInput"
      >
        <Body>{'Swift'}</Body>
      </SelectableCard>

      <br />

      <Title
          size={3}
          text="How likely are you to recommend Playbook to a friend?"
      />

      <br />

      <SelectableCard
          checked={state.radioSelected === 'first'}
          inputId="radio-1"
          multi={false}
          name="radio"
          onChange={handleRadioSelect}
          value="first"
          variant="displayInput"
      >
        <Body>{'5'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={state.radioSelected === 'second'}
          inputId="radio-2"
          multi={false}
          name="radio"
          onChange={handleRadioSelect}
          value="second"
          variant="displayInput"
      >
        <Body>
          {'4'}
        </Body>
      </SelectableCard>

      <SelectableCard
          checked={state.radioSelected === 'third'}
          inputId="radio-3"
          multi={false}
          name="radio"
          onChange={handleRadioSelect}
          value="third"
          variant="displayInput"
      >
        <Body>{'3'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={state.radioSelected === 'fourth'}
          inputId="radio-4"
          multi={false}
          name="radio"
          onChange={handleRadioSelect}
          value="fourth"
          variant="displayInput"
      >
        <Body>{'2'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={state.radioSelected === 'fifth'}
          inputId="radio-5"
          multi={false}
          name="radio"
          onChange={handleRadioSelect}
          value="fifth"
          variant="displayInput"
      >
        <Body>{'1'}</Body>
      </SelectableCard>
    </>
  )
}

export default SelectableCardInput

With Errors

import React, { useState } from 'react'
import { Body, SelectableCard, Title } from 'playbook-ui'

const SelectableCardError = (props) => {
  const [football, setFootball] = useState(false)
  const [basketball, setBasketball] = useState(false)
  const [baseball, setBaseball] = useState(false)

  return (
    <div>
      <Title
          size={3}
          text="What sports do you like?"
      />
      <br />
      <SelectableCard
          checked={football}
          error
          inputId="football"
          name="football"
          onChange={() => setFootball(!football)}
          value="football"
          variant="displayInput"
      >
        <Body>{'Football'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={basketball}
          error
          inputId="basketball"
          name="basketball"
          onChange={() => setBasketball(!basketball)}
          value="basketball"
          variant="displayInput"
      >
        <Body>{'Basketball'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={baseball}
          error
          inputId="baseball"
          name="baseball"
          onChange={() => setBaseball(!baseball)}
          value="baseball"
          variant="displayInput"
      >
        <Body>{'Baseball'}</Body>
      </SelectableCard>
    </div>
  )
}
export default SelectableCardError

Things to Avoid

Do not use Forms, Charts & Graphs, Text Input, Textarea, etc inside of selectable card.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat