Visual Picker

Visual Picker

A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced.

Coverable Content

Preview

Overview of CSS Classes

Selector.slds-visual-picker
Summary

Initializes a visual picker component

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

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

Initializes a vertical visual picker component

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

Checkmark that is visibily toggled when input is checked

Restrict.slds-box
VariantTrue