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.

<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">
      <input type="radio" id="visual-picker-306" name="options" />
      <label for="visual-picker-306">
        <span class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
          <span class="slds-is-selected">
            <span class="slds-icon_container" title="description of icon when needed">
              <svg class="slds-icon slds-icon_large slds-icon-action-check" aria-hidden="true">
                <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#check"></use>
              </svg>
              <span class="slds-assistive-text">Provide description of icon</span>
            </span>
          </span>
          <span class="slds-is-not-selected">
            <span class="slds-icon_container" title="description of icon when needed">
              <svg class="slds-icon slds-icon-utility-connected_apps slds-icon_large slds-icon-text-default" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#connected_apps"></use>
              </svg>
              <span class="slds-assistive-text">Provide description of icon</span>
            </span>
          </span>
        </span>
        <span class="slds-visual-picker__body">Connected App</span>
      </label>
    </div>
    <div class="slds-visual-picker slds-visual-picker_medium">
      <input type="radio" id="visual-picker-307" name="options" />
      <label for="visual-picker-307">
        <span class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
          <span class="slds-is-selected">
            <span class="slds-icon_container" title="description of icon when needed">
              <svg class="slds-icon slds-icon_large slds-icon-action-check" aria-hidden="true">
                <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#check"></use>
              </svg>
              <span class="slds-assistive-text">Provide description of icon</span>
            </span>
          </span>
          <span class="slds-is-not-selected">
            <span class="slds-icon_container" title="description of icon when needed">
              <svg class="slds-icon slds-icon-utility-custom_apps slds-icon_large slds-icon-text-default" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#custom_apps"></use>
              </svg>
              <span class="slds-assistive-text">Provide description of icon</span>
            </span>
          </span>
        </span>
        <span class="slds-visual-picker__body">Custom App</span>
      </label>
    </div>
  </div>
</fieldset>

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