6
6
SelectOption ,
7
7
SelectRoot ,
8
8
SelectTrigger ,
9
- SelectValue ,
9
+ SelectValue
10
10
} from '@qwik-ui/headless' ;
11
11
import styles from './select.css?inline' ;
12
12
@@ -16,15 +16,13 @@ export default component$(() => {
16
16
< >
17
17
< h2 > This is the documentation for the Select</ h2 >
18
18
< SelectRoot >
19
- < SelectLabel class = "mr-2" >
20
- Alternate Tailwind Select implementation
21
- </ SelectLabel >
19
+ < SelectLabel class = "mr-2" > Alternate Tailwind Select implementation</ SelectLabel >
22
20
< SelectTrigger class = "select-caret inline-flex items-center justify-between w-full h-12 max-w-xs px-4 text-sm font-semibold leading-loose border rounded-lg cursor-pointer border-base-content border-opacity-20 bg-base-100 shrink-0" >
23
21
< SelectValue placeholder = "Select an option! ⚡" />
24
22
</ SelectTrigger >
25
23
< SelectListBox class = "w-full max-w-xs border border-base-content border-opacity-20 bg-base-100 rounded-[0.25rem] py-1" >
26
24
< SelectOption
27
- value = "🚀 Qwik"
25
+ optionValue = "🚀 Qwik"
28
26
class = "px-1 leading-loose hover:bg-gray-300"
29
27
/>
30
28
< SelectGroup class = "" >
@@ -33,12 +31,12 @@ export default component$(() => {
33
31
{ value : '🍎 Apple' , disabled : false } ,
34
32
{ value : '🍌 Banana' , disabled : false } ,
35
33
{ value : '🍒 Cherry' , disabled : false } ,
36
- { value : '🐲 Dragonfruit' , disabled : true } ,
34
+ { value : '🐲 Dragonfruit' , disabled : true }
37
35
] . map ( ( option ) => {
38
36
return (
39
37
< SelectOption
40
38
key = { option . value }
41
- value = { option . value }
39
+ optionValue = { option . value }
42
40
disabled = { option . disabled }
43
41
class = "px-1 leading-loose hover:bg-gray-300"
44
42
/>
0 commit comments