Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.
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 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
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
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
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
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
Do not use Forms, Charts & Graphs, Text Input, Textarea, etc inside of selectable card.