|
7 | 7 | <option value="4">Option 4</option> |
8 | 8 | <option value="5">Option 5</option> |
9 | 9 | </select> |
10 | | - <!-- Size --> |
11 | | - <select class="select rounded-container" size="4" value="1"> |
| 10 | + |
| 11 | + <!-- |
| 12 | + NOTE: the following Select element variants are included purely for legacy support. It is not longer advised you use these variants in production apps. Currently the styles are too limited and the style API vary greatly bewteen browser vendors. Expect these styles to be removed in the next major version of Skeleton (v4.0). In the meantime, consider a replacement using a custom Listbox component if you need this type of interface in your application. We've provided some resources below to guide you in this process. |
| 13 | +
|
| 14 | + ARIA APG Guidelines: |
| 15 | + https://www.w3.org/WAI/ARIA/apg/patterns/listbox/ |
| 16 | +
|
| 17 | + Zag.js Listbox component: |
| 18 | + (NOTE: this will come to Skeleton in the future) |
| 19 | + https://zagjs.com/components/react/listbox |
| 20 | + https://zagjs.com/components/svelte/listbox |
| 21 | +
|
| 22 | + Similar components may also exist or third party libraries such as Bits, Melt, or Radix: |
| 23 | + https://www.skeleton.dev/docs/headless/bits-ui |
| 24 | + https://www.skeleton.dev/docs/headless/melt-ui |
| 25 | + https://www.skeleton.dev/docs/headless/radix-ui |
| 26 | + --> |
| 27 | + |
| 28 | + <!-- Size Variant --> |
| 29 | + <!-- <select class="select rounded-container" size="4" value="1"> |
12 | 30 | <option value="1">Option 1</option> |
13 | 31 | <option value="2">Option 2</option> |
14 | 32 | <option value="3">Option 3</option> |
15 | 33 | <option value="4">Option 4</option> |
16 | 34 | <option value="5">Option 5</option> |
17 | | - </select> |
18 | | - <!-- Multiple --> |
19 | | - <select class="select rounded-container" multiple value="['1', '2']"> |
| 35 | + </select> --> |
| 36 | + |
| 37 | + <!-- Multiple Variant --> |
| 38 | + <!-- <select class="select rounded-container" multiple value="['1', '2']"> |
20 | 39 | <option value="1">Option 1</option> |
21 | 40 | <option value="2">Option 2</option> |
22 | 41 | <option value="3">Option 3</option> |
23 | 42 | <option value="4">Option 4</option> |
24 | 43 | <option value="5">Option 5</option> |
25 | | - </select> |
| 44 | + </select> --> |
26 | 45 | </form> |
0 commit comments