mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
128 lines
4.3 KiB
YAML
128 lines
4.3 KiB
YAML
name: "Select"
|
|
|
|
description: "A form control that presents users with a dropdown list of predefined options, allowing selection of one option from the list."
|
|
|
|
category: "Input"
|
|
|
|
slds_classes:
|
|
root: "slds-select"
|
|
elements:
|
|
- class: "slds-select_container"
|
|
description: "Container wrapper for select element"
|
|
purpose: "Provides styling wrapper for the select control"
|
|
modifiers: []
|
|
states:
|
|
- class: "slds-has-error"
|
|
description: "Error state styling"
|
|
trigger: "When select validation fails"
|
|
- class: "slds-is-disabled"
|
|
description: "Disabled state styling"
|
|
trigger: "When select is not interactive"
|
|
|
|
variants:
|
|
- name: "Base"
|
|
description: "Standard select dropdown"
|
|
classes: ["slds-select"]
|
|
usage_context: "Default select implementation for option selection"
|
|
differences: "Standard dropdown with predefined options"
|
|
|
|
lightning_component:
|
|
name: "lightning-select"
|
|
url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-select"
|
|
mapping_notes: "Direct mapping - Lightning component implements SLDS select blueprint"
|
|
|
|
accessibility:
|
|
keyboard_support:
|
|
- "Tab to focus the select"
|
|
- "Arrow keys to navigate options"
|
|
- "Enter/Space to open dropdown"
|
|
- "First letter to jump to matching options"
|
|
screen_reader:
|
|
- "Select purpose and current value announced"
|
|
- "Option list and current selection communicated"
|
|
- "Required state indicated when applicable"
|
|
aria_attributes:
|
|
- "aria-describedby for help text and error messages"
|
|
- "aria-invalid when validation fails"
|
|
- "aria-required for required selects"
|
|
- "aria-label when no visible label present"
|
|
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- "For selecting one option from a predefined list"
|
|
- "When you have 4-15 options to choose from"
|
|
- "For standard form inputs requiring selection"
|
|
- "When options are well-known and don't require search"
|
|
when_not_to_use:
|
|
- "For more than 15 options (use combobox instead)"
|
|
- "When users need to search or filter (use combobox)"
|
|
- "For multiple selections (use checkbox group)"
|
|
- "For binary choices (use radio buttons or toggle)"
|
|
best_practices:
|
|
- "Use clear, descriptive option labels"
|
|
- "Order options logically (alphabetical, frequency, importance)"
|
|
- "Provide a default selection when appropriate"
|
|
- "Keep option lists manageable in size"
|
|
- "Use proper form structure and labeling"
|
|
common_mistakes:
|
|
- "Too many options making selection difficult"
|
|
- "Unclear or ambiguous option labels"
|
|
- "Poor option ordering"
|
|
- "Missing default selection when needed"
|
|
|
|
code_examples:
|
|
- title: "Basic Select"
|
|
code: |
|
|
<div class="slds-form-element">
|
|
<label class="slds-form-element__label" for="select-01">
|
|
<abbr class="slds-required" title="required">* </abbr>Select Label
|
|
</label>
|
|
<div class="slds-form-element__control">
|
|
<div class="slds-select_container">
|
|
<select class="slds-select" id="select-01" required>
|
|
<option value="">Choose one...</option>
|
|
<option value="option1">Option One</option>
|
|
<option value="option2">Option Two</option>
|
|
<option value="option3">Option Three</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
description: "Basic select with label and options"
|
|
|
|
styling_hooks:
|
|
- name: "--slds-c-select-color-background"
|
|
description: "Background color for select"
|
|
category: "color"
|
|
- name: "--slds-c-select-color-border"
|
|
description: "Border color for select"
|
|
category: "color"
|
|
- name: "--slds-c-select-color-border-focus"
|
|
description: "Border color for focused select"
|
|
category: "color"
|
|
|
|
dependencies:
|
|
css_files: ["select.css", "form-element.css"]
|
|
javascript: []
|
|
icons: []
|
|
other_components: ["form-element"]
|
|
|
|
related_components:
|
|
- name: "Combobox"
|
|
relationship: "alternative"
|
|
description: "Enhanced select with search and filtering"
|
|
- name: "Picklist"
|
|
relationship: "similar"
|
|
description: "Alternative selection control"
|
|
- name: "Radio Group"
|
|
relationship: "alternative"
|
|
description: "Alternative for fewer, mutually exclusive options"
|
|
|
|
references:
|
|
official_docs: "https://v1.lightningdesignsystem.com/components/select/"
|
|
|
|
metadata:
|
|
version: "1.0.0"
|
|
last_updated: "2024-12-19"
|
|
review_status: "complete"
|