Selectable Components ☂️

[thyhmdo]

Background: As we discussed about single selectable tiles, this opened up an issue about where other components could have inconsistent visuals between the check-mark icon versus radio button.

---

Problem

Selectable visual could be unclear for users to know if they can interact with them.

Things to consider

1. Think about the position of whether to place them to the left or right inside a component, to match the convention for radio buttons and checkboxes, and selectable data table rows?
2. Consider updating the guidance if needed.
3. Consider if there can be radio button groups without a default selection. (Could be the case for legal issue)
4. Is there a basic difference between a text-only radio button group, and one that is formed as part of a tile, structured list or data table set? Does that give us wiggle room in defining when it’s ‘okay’ to have none selected by default?
5. Is there a different between these and a toggle item, where it can be selected or unselected but doesn’t visually have a radio button/checkbox indicator? And if so, what?

---

Tasks

Preview Give feedback

1. 🔍
2. [Selectable Components] Research: Audit #14763
   role: design ✏️ type: enhancement 💡 +2
   
3. [Selectable Components] Design Solutions & Final Specs #14766
   role: design ✏️ type: enhancement 💡 +2
   
4. 🎨
5. [Selectable Components: Tile - Single Select] Figma Kit carbon-design-kit#729
   kit: figma role: design ✏️ type: enhancement 💡 +3
   
6. [Selectable Components: Tile] Update Text Size for Consistency carbon-design-kit#692
   kit: figma role: design ✏️ type: enhancement 💡 version: 11 +4
   
7. [Selectable Components: Tile & Structured List] Figma Kit carbon-design-kit#744
   component: structured-list component: tile kit: figma role: design ✏️ type: enhancement 💡 +5
   
8. [Tile] Add feature flag carbon-design-kit#783
   component: tile kit: figma role: design ✏️ type: bug 🐛 +4
   
9. [Structured list] Add feature flag carbon-design-kit#792
   component: structured-list kit: figma role: design ✏️ type: enhancement 💡 +4
   
10. 📖
11. [Selectable Components: Radio Button] Website Doc carbon-website#3863
    component: radio-button role: design ✏️ type: docs 📖 type: enhancement 💡 +4
    
12. [Selectable Components: Tile] Website Doc carbon-website#3861
    component: tile role: design ✏️ type: docs 📖 type: enhancement 💡 +4
    
13. [Selectable Components: Structured List - Usage] Website Doc carbon-website#3862
    component: structured-list role: design ✏️ type: docs 📖 type: enhancement 💡 +4
    
14. [Selectable Components: Structured List - Style] Website Doc #15775
    component: structured-list role: design ✏️ type: docs 📖 type: enhancement 💡 +4
    
15. [Selectable Components: Structured List] Update Component Overview Image carbon-website#3906
    component: structured-list role: design ✏️ type: docs 📖 type: enhancement 💡 +4
    
16. 🤖
17. [Selectable Components: Tile] Dev Implementation #15478
    1 of 1
    component: tile role: dev 🤖 type: enhancement 💡 +3
    
18. [Selectable Components: Structured List] Dev Implementation #15479
    component: structured-list role: dev 🤖 type: enhancement 💡 +3
    
19. [Selectable Components: Radio Button] Dev Implementation #15705
    component: radio-button role: dev 🤖 status: needs triage 🕵️‍♀️ type: bug 🐛 type: enhancement 💡 +5