visual-picker

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 three sizes - small, medium (default) or large. The default uses radio buttons, allowing the user to pick only one. To allow multiple selections, follow the checkbox examples below.

Small

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">

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">

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">

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">

Checkbox Examples

To allow users to select more than one option, use checkboxes instead of radio buttons.

Small Checkboxes

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">

Medium Checkboxes

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">

Large Checkboxes

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">

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">

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">

Link

Share the knowledge

Harness your team's collective know-how with our powerful knowledge base

<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">

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">

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">