Visual Picker

Visual Picker

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

Coverable Content

Preview

No content has been added for this component.

No content has been added for this component.

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_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-box_link
Summary

Checkmark that is visibily toggled when input is checked

Restricta
VariantTrue