Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add checkmark to select explainer #1059

Merged
merged 1 commit into from
May 29, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions site/src/pages/components/selectlist.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -540,6 +540,15 @@ When the listbox is open:

The HTML parser will not allow `<button>` or `<datalist>` children when the `multiple` or `size` attributes are present on `<select>`. This will ensure that the old rendering behavior of `multiple` and `size` is used. If the author adds a `<datalist>` or `<button>` via script to a `<select multiple>` or `<select size>`, the old rendering will still be used. In the future, we would like to upgrade `<select multiple>` to become stylable, at which time we will change the HTML parser again to allow `<button>` and `<datalist>` children. This also allows feature detection to know whether `<select multiple>` improvements are ready to be used. More detail in [this issue](https://github.com/openui/open-ui/issues/977#issuecomment-1910874971).

## Checkmark

A checkmark is included next to the option elements by default in order to visually indicate which option is currently selected. This improves accessibility/usability because selection doesn't follow focus. You can opt out of rendering the checkmark with the following css:
```css
option::before {
display: none;
}
```

## Design decisions

- [Why reuse `<select>` instead of creating a new element](https://github.com/openui/open-ui/issues/970)
Expand All @@ -555,3 +564,4 @@ The HTML parser will not allow `<button>` or `<datalist>` children when the `mul
- Why opt-in with CSS
- https://github.com/whatwg/html/issues/9799#issuecomment-1789202391
- https://github.com/whatwg/html/issues/9799#issuecomment-1926411811
- [Why include a checkmark next to options by default](https://github.com/openui/open-ui/issues/863)