Component Blueprints

Visual Picker

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced.
Add the following object(s)

Coverable Content#

Base#

Coverable content comes in two sizes - medium or large.

Medium#

Select an app
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Select an app</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_medium">

Large#

Select an app
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Select an app</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_large">

States#

Disabled#

Select an app
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Select an app</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_medium">

Examples#

Medium checkbox group#

Add the following object(s)
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Add the following object(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_medium">

Large checkbox group#

Add the following object(s)
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Add the following object(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_large">

Non Coverable Content#

Base#

Select a plan
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Select a plan</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_medium">

States#

Disabled#

Select a plan
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Select a plan</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_medium">
<div class="demo-only" style="width:24rem">
  <a href="javascript:void(0);" class="slds-box slds-box_link slds-box_x-small slds-media">
    <div class="slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small">
      <span class="slds-icon_container slds-icon-utility-knowledge_base">

Vertical#

Base#

Select an option
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Select an option</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_vertical">

States#

Disabled#

Select an option
<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Select an option</legend>
  <div class="slds-form-element__control">
    <div class="slds-visual-picker slds-visual-picker_vertical">

Overview of CSS Classes#

Selector.slds-visual-picker
Summary

Initializes a visual picker component

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-visual-picker__figure
Summary

Visual container for icon and text

Restrict.slds-visual-picker div, .slds-visual-picker span
Selector.slds-is-not-selected
Summary

Non-selected state

Restrict.slds-visual-picker__figure > span
Selector.slds-is-selected
Summary

Selected state

Restrict.slds-visual-picker__figure > span
Selector.slds-visual-picker__icon
Summary

Icon within visual picker

Restrict.slds-visual-picker__figure
Selector.slds-visual-picker__text
Summary

Text within visual picker

Restrict.slds-visual-picker__figure
Selector.slds-visual-picker_medium
Summary

Size modifier to adjust to the default size of medium

Restrict.slds-visual-picker
ModifierTrue
Selector.slds-visual-picker_large
Summary

Size modifier to adjust to the size of large

Restrict.slds-visual-picker
ModifierTrue
Selector.slds-visual-picker__body
Summary

Text area that sits outside the visual picker

Restrict.slds-visual-picker span
Selector.slds-visual-picker__text-check
Summary

Checkmark that is visibily toggled when input is checked

Supportdev-ready
Restrict.slds-visual-picker span
VariantTrue
Selector.slds-visual-picker_vertical
Summary

Initializes a vertical visual picker component

Supportdev-ready
Restrict.slds-visual-picker
VariantTrue
Selector.slds-box_link
Summary

Checkmark that is visibily toggled when input is checked

Supportdev-ready
Restrict.slds-box
VariantTrue

Visual Picker Release Notes

2.7.0

Changed

  • Updated disabled visual picker UI to be more apparent and better match established conventions for disabled UI