File tree Expand file tree Collapse file tree 14 files changed +75
-73
lines changed
apps/website/src/routes/docs/headless/checkbox/examples
packages/kit-headless/src/components/checkbox Expand file tree Collapse file tree 14 files changed +75
-73
lines changed Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
- import { MyCheckbox , CheckboxIndicator } from '@qwik-ui/headless' ;
2
+ import { Checkbox , CheckboxIndicator } from '@qwik-ui/headless' ;
3
3
export default component$ ( ( ) => {
4
4
return (
5
5
< >
6
- < MyCheckbox class = "flex items-center gap-3 border-2 border-black p-2 " >
6
+ < Checkbox class = "flex items-center gap-3 border-2 border-black p-2 " >
7
7
< CheckboxIndicator class = "flex h-[25px] w-[25px] items-center justify-center bg-slate-600" >
8
8
✅
9
9
</ CheckboxIndicator >
10
10
I have read the README file
11
- </ MyCheckbox >
11
+ </ Checkbox >
12
12
</ >
13
13
) ;
14
14
} ) ;
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import {
3
- MyCheckbox ,
3
+ Checkbox ,
4
4
CheckboxIndicator ,
5
5
CheckList ,
6
6
ChecklistIndicator ,
@@ -13,7 +13,7 @@ export default component$(() => {
13
13
< >
14
14
< h3 id = "pizza-toppings" > Pizza toppings</ h3 >
15
15
< CheckList ariaLabeledBy = "pizza-toppings" class = "flex flex-col gap-4" >
16
- < MyCheckbox
16
+ < Checkbox
17
17
class = "flex items-center gap-3 border-2 border-black p-2"
18
18
checkList = { true }
19
19
>
@@ -27,16 +27,16 @@ export default component$(() => {
27
27
</ div >
28
28
</ ChecklistIndicator >
29
29
Pick all toppings
30
- </ MyCheckbox >
30
+ </ Checkbox >
31
31
32
32
{ toppingNames . map ( ( name , i ) => {
33
33
return (
34
- < MyCheckbox class = "ml-8 flex items-center gap-3 border-2 border-black p-2" >
34
+ < Checkbox class = "ml-8 flex items-center gap-3 border-2 border-black p-2" >
35
35
< CheckboxIndicator class = "flex h-[25px] w-[25px] items-center justify-center bg-slate-600" >
36
36
{ toppingImages [ i ] }
37
37
</ CheckboxIndicator >
38
38
{ name }
39
- </ MyCheckbox >
39
+ </ Checkbox >
40
40
) ;
41
41
} ) }
42
42
</ CheckList >
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import {
3
3
CheckboxIndicator ,
4
- MyCheckbox ,
4
+ Checkbox ,
5
5
ChecklistIndicator ,
6
6
CheckList ,
7
7
} from 'packages/kit-headless/src/components/checkbox/index' ;
@@ -13,7 +13,7 @@ export default component$(() => {
13
13
< >
14
14
< h3 id = "test123" > Pick a cat</ h3 >
15
15
< CheckList class = "flex flex-col gap-3" ariaLabeledBy = "test123" >
16
- < MyCheckbox
16
+ < Checkbox
17
17
class = "flex items-center gap-3 bg-slate-900 text-white"
18
18
checkList = { true }
19
19
checkBoxSig = { checklistSig }
@@ -29,21 +29,21 @@ export default component$(() => {
29
29
</ div >
30
30
</ ChecklistIndicator >
31
31
< p > Controlls all</ p >
32
- </ MyCheckbox >
33
- < MyCheckbox
32
+ </ Checkbox >
33
+ < Checkbox
34
34
id = "child-1"
35
35
class = "flex items-center gap-3 bg-slate-900 pr-2 text-white"
36
36
>
37
37
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
38
38
< p > No other stuff is needed here</ p >
39
- </ MyCheckbox >
39
+ </ Checkbox >
40
40
41
- < MyCheckbox id = "child-2" class = "bg-slate-900 text-white" >
41
+ < Checkbox id = "child-2" class = "bg-slate-900 text-white" >
42
42
< div class = "flex items-center gap-3" >
43
43
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
44
44
< p > Im a true.tsx</ p >
45
45
</ div >
46
- </ MyCheckbox >
46
+ </ Checkbox >
47
47
</ CheckList >
48
48
< p > You signal is: </ p >
49
49
< p id = "signal-to-text" > { `${ checklistSig . value } ` } </ p >
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator' ;
3
- import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
3
+ import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
4
4
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist' ;
5
5
export default component$ ( ( ) => {
6
6
const firstUserSig = useSignal ( false ) ;
@@ -9,29 +9,29 @@ export default component$(() => {
9
9
< >
10
10
< h3 id = "test123" > Pick a cat</ h3 >
11
11
< CheckList class = "flex flex-col gap-3" ariaLabeledBy = "test123" >
12
- < MyCheckbox
12
+ < Checkbox
13
13
class = "flex items-center gap-3 bg-slate-900 p-2 text-white"
14
14
checkList = { true }
15
15
>
16
16
< CheckboxIndicator class = " flex w-[80px] justify-center bg-white p-3" >
17
17
✅
18
18
</ CheckboxIndicator >
19
19
< p > Controlls all</ p >
20
- </ MyCheckbox >
21
- < MyCheckbox
20
+ </ Checkbox >
21
+ < Checkbox
22
22
checkBoxSig = { firstUserSig }
23
23
class = "flex items-center gap-3 bg-slate-900 pr-2 text-white"
24
24
>
25
25
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
26
26
< p > No other stuff is needed here</ p >
27
- </ MyCheckbox >
27
+ </ Checkbox >
28
28
29
- < MyCheckbox checkBoxSig = { secondUserSig } class = "bg-slate-900 text-white" >
29
+ < Checkbox checkBoxSig = { secondUserSig } class = "bg-slate-900 text-white" >
30
30
< div class = "flex items-center gap-3" >
31
31
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
32
32
< p > No other stuff is needed here</ p >
33
33
</ div >
34
- </ MyCheckbox >
34
+ </ Checkbox >
35
35
</ CheckList >
36
36
</ >
37
37
) ;
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator' ;
3
- import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
3
+ import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
4
4
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist' ;
5
5
import { ChecklistIndicator } from '@qwik-ui/headless' ;
6
6
export default component$ ( ( ) => {
@@ -10,7 +10,7 @@ export default component$(() => {
10
10
< >
11
11
< h3 id = "test123" > Pick a cat</ h3 >
12
12
< CheckList class = "flex flex-col gap-3" ariaLabeledBy = "test123" >
13
- < MyCheckbox
13
+ < Checkbox
14
14
class = "flex items-center gap-3 bg-slate-900 p-2 text-white"
15
15
checkList = { true }
16
16
>
@@ -24,21 +24,21 @@ export default component$(() => {
24
24
</ div >
25
25
</ ChecklistIndicator >
26
26
< p > Controlls all</ p >
27
- </ MyCheckbox >
28
- < MyCheckbox
27
+ </ Checkbox >
28
+ < Checkbox
29
29
checkBoxSig = { firstUserSig }
30
30
class = "flex items-center gap-3 bg-slate-900 pr-2 text-white"
31
31
>
32
32
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
33
33
< p > No other stuff is needed here</ p >
34
- </ MyCheckbox >
34
+ </ Checkbox >
35
35
36
- < MyCheckbox checkBoxSig = { secondUserSig } class = "bg-slate-900 text-white" >
36
+ < Checkbox checkBoxSig = { secondUserSig } class = "bg-slate-900 text-white" >
37
37
< div class = "flex items-center gap-3" >
38
38
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
39
39
< p > No other stuff is needed here</ p >
40
40
</ div >
41
- </ MyCheckbox >
41
+ </ Checkbox >
42
42
</ CheckList >
43
43
</ >
44
44
) ;
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import {
3
3
CheckboxIndicator ,
4
- MyCheckbox ,
4
+ Checkbox ,
5
5
ChecklistIndicator ,
6
6
CheckList ,
7
7
} from 'packages/kit-headless/src/components/checkbox/index' ;
@@ -12,7 +12,7 @@ export default component$(() => {
12
12
< >
13
13
< h3 id = "test123" > Pick a cat</ h3 >
14
14
< CheckList class = "flex flex-col gap-3" ariaLabeledBy = "test123" >
15
- < MyCheckbox
15
+ < Checkbox
16
16
class = "flex items-center gap-3 bg-slate-900 text-white"
17
17
checkList = { true }
18
18
checkBoxSig = { checklistSig }
@@ -28,21 +28,21 @@ export default component$(() => {
28
28
</ div >
29
29
</ ChecklistIndicator >
30
30
< p > Controlls all</ p >
31
- </ MyCheckbox >
32
- < MyCheckbox
31
+ </ Checkbox >
32
+ < Checkbox
33
33
id = "child-1"
34
34
class = "flex items-center gap-3 bg-slate-900 pr-2 text-white"
35
35
>
36
36
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
37
37
< p > No other stuff is needed here</ p >
38
- </ MyCheckbox >
38
+ </ Checkbox >
39
39
40
- < MyCheckbox id = "child-2" class = "bg-slate-900 text-white" >
40
+ < Checkbox id = "child-2" class = "bg-slate-900 text-white" >
41
41
< div class = "flex items-center gap-3" >
42
42
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
43
43
< p > Im a true.tsx</ p >
44
44
</ div >
45
- </ MyCheckbox >
45
+ </ Checkbox >
46
46
</ CheckList >
47
47
< p > You signal is: </ p >
48
48
< p id = "signal-to-text" > { `${ checklistSig . value } ` } </ p >
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator' ;
3
- import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
3
+ import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
4
4
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist' ;
5
5
export default component$ ( ( ) => {
6
6
const firstUserSig = useSignal ( true ) ;
@@ -9,29 +9,29 @@ export default component$(() => {
9
9
< >
10
10
< h3 id = "test123" > Pick a cat</ h3 >
11
11
< CheckList class = "flex flex-col gap-3" ariaLabeledBy = "test123" >
12
- < MyCheckbox
12
+ < Checkbox
13
13
class = "flex items-center gap-3 bg-slate-900 p-2 text-white"
14
14
checkList = { true }
15
15
>
16
16
< CheckboxIndicator class = " flex w-[80px] justify-center bg-white p-3" >
17
17
✅
18
18
</ CheckboxIndicator >
19
19
< p > Controlls all</ p >
20
- </ MyCheckbox >
21
- < MyCheckbox
20
+ </ Checkbox >
21
+ < Checkbox
22
22
checkBoxSig = { firstUserSig }
23
23
class = "flex items-center gap-3 bg-slate-900 pr-2 text-white"
24
24
>
25
25
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
26
26
< p > No other stuff is needed here</ p >
27
- </ MyCheckbox >
27
+ </ Checkbox >
28
28
29
- < MyCheckbox checkBoxSig = { secondUserSig } class = "bg-slate-900 text-white" >
29
+ < Checkbox checkBoxSig = { secondUserSig } class = "bg-slate-900 text-white" >
30
30
< div class = "flex items-center gap-3" >
31
31
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
32
32
< p > No other stuff is needed here</ p >
33
33
</ div >
34
- </ MyCheckbox >
34
+ </ Checkbox >
35
35
</ CheckList >
36
36
</ >
37
37
) ;
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator' ;
3
- import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
3
+ import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
4
4
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist' ;
5
5
export default component$ ( ( ) => {
6
6
const firstUserSig = useSignal ( true ) ;
@@ -9,29 +9,29 @@ export default component$(() => {
9
9
< >
10
10
< h3 id = "test123" > Pick a cat</ h3 >
11
11
< CheckList class = "flex flex-col gap-3" ariaLabeledBy = "test123" >
12
- < MyCheckbox
12
+ < Checkbox
13
13
class = "flex items-center gap-3 bg-slate-900 p-2 text-white"
14
14
checkList = { true }
15
15
>
16
16
< CheckboxIndicator class = " flex w-[80px] justify-center bg-white p-3" >
17
17
✅
18
18
</ CheckboxIndicator >
19
19
< p > Controlls all</ p >
20
- </ MyCheckbox >
21
- < MyCheckbox
20
+ </ Checkbox >
21
+ < Checkbox
22
22
checkBoxSig = { firstUserSig }
23
23
class = "flex items-center gap-3 bg-slate-900 pr-2 text-white"
24
24
>
25
25
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
26
26
< p > No other stuff is needed here</ p >
27
- </ MyCheckbox >
27
+ </ Checkbox >
28
28
29
- < MyCheckbox class = "bg-slate-900 text-white" >
29
+ < Checkbox class = "bg-slate-900 text-white" >
30
30
< div class = "flex items-center gap-3" >
31
31
< CheckboxIndicator class = "w-fit bg-slate-600" > ✅</ CheckboxIndicator >
32
32
< p > No other stuff is needed here</ p >
33
33
</ div >
34
- </ MyCheckbox >
34
+ </ Checkbox >
35
35
</ CheckList >
36
36
</ >
37
37
) ;
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator' ;
3
- import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
3
+ import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
4
4
5
5
export default component$ ( ( ) => {
6
6
return (
7
7
< >
8
8
< p > I'm the default checkbox!!!</ p >
9
- < MyCheckbox class = " text-white" >
9
+ < Checkbox class = " text-white" >
10
10
< div class = "flex items-center gap-3" >
11
11
< CheckboxIndicator class = "w-fit bg-slate-600" >
12
12
< p id = "indicator" > ✅</ p >
13
13
</ CheckboxIndicator >
14
14
< p > No other stuff is needed here</ p >
15
15
</ div >
16
- </ MyCheckbox >
16
+ </ Checkbox >
17
17
</ >
18
18
) ;
19
19
} ) ;
Original file line number Diff line number Diff line change 1
1
import { component$ , useSignal , useStyles$ } from '@builder.io/qwik' ;
2
2
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator' ;
3
- import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
3
+ import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox' ;
4
4
5
5
export default component$ ( ( ) => {
6
6
const userSig = useSignal ( true ) ;
7
7
return (
8
8
< >
9
- < MyCheckbox class = "bg-slate-900 text-white" checkBoxSig = { userSig } >
9
+ < Checkbox class = "bg-slate-900 text-white" checkBoxSig = { userSig } >
10
10
< div class = "flex items-center gap-3" >
11
11
< CheckboxIndicator class = "w-fit bg-slate-600" >
12
12
< p id = "indicator" > ✅</ p >
13
13
</ CheckboxIndicator >
14
14
< p > No other stuff is needed here</ p >
15
15
</ div >
16
- </ MyCheckbox >
16
+ </ Checkbox >
17
17
< div > { `${ userSig . value } ` } </ div >
18
18
</ >
19
19
) ;
You can’t perform that action at this time.
0 commit comments