sp-picker

Overview API Changelog

Accessibility

Include a visible label

Every picker should have a label. A picker without a label is ambiguous and not accessible.

Use help text to show context

A picker’s description in the help text can communicate what to select or how to select an option. This includes information such as:

The help text’s message should not simply restate the same information in the label in order to prompt someone to interact with a picker. Don’t add help text to maintain layout continuity with other inputs that require help text if it isn’t actually relevant or meaningful to a user.

The help text area also displays an error message. When a picker already includes help text and an error is triggered, the help text is replaced with error text. Once the error is resolved, the help text description reappears below the picker.

Since one gets replaced by the other, the language of the help text and error text need to work together to convey the same messaging. Help text explains the requirement or adds supplementary context for how to complete the interaction. Error text tells a user how to fix the error by re-stating the selection requirements or describing the necessary interaction. Make sure that the help text and the error text include the same essential information so that it isn’t lost if one replaces the other (e.g., minimum requirements).

Use <sp-help-text> to add help text and error text:

Help text 
<sp-field-label for="text">Preferred contact method:</sp-field-label>
<sp-picker id="text" label="Select contact method" aria-describedby="help-text">
    <sp-menu-item>Phone</sp-menu-item>
    <sp-menu-item>Text</sp-menu-item>
    <sp-menu-item>Email</sp-menu-item>
</sp-picker>
<sp-help-text id="help-text">
    Choose the best way to contact you in case there's an issue with your
    account.
</sp-help-text>
 Error text