d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { Checkbox, CheckboxCheckedState, Label } from "@medusajs/ui"
|
|
import { useState } from "react"
|
|
|
|
export default function CheckboxControlled() {
|
|
const [checked, setChecked] = useState<CheckboxCheckedState>(false)
|
|
|
|
const handleToggle = () => {
|
|
switch (checked) {
|
|
case "indeterminate":
|
|
setChecked(true)
|
|
return
|
|
case true:
|
|
setChecked(false)
|
|
return
|
|
default:
|
|
setChecked("indeterminate")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 items-center">
|
|
<span className="txt-small text-center w-3/4">
|
|
The following checkbox will move from unchecked, to indeterminate, and
|
|
finally checked each time you click it
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="controlled-checkbox"
|
|
checked={checked}
|
|
onCheckedChange={handleToggle}
|
|
/>
|
|
<Label htmlFor="controlled-checkbox">
|
|
Controlled Checkbox: (
|
|
{checked === "indeterminate"
|
|
? "Indeterminate"
|
|
: checked
|
|
? "Checked"
|
|
: "Unchecked"}
|
|
)
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|