88 lines
2.4 KiB
Plaintext
88 lines
2.4 KiB
Plaintext
import { Button } from "@components/Button";
|
|
import { Label } from "@components/Label";
|
|
import { Checkbox } from "@components/Checkbox";
|
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
|
import { Story } from "@/components/Story";
|
|
import { LoadedCode } from "@/components/LoadedCode";
|
|
import { CheckboxDemo } from "./CheckboxBlocks/Preview";
|
|
import Examples from "./CheckboxBlocks/Examples";
|
|
|
|
# Checkbox
|
|
A control that allows the user to toggle between checked and not checked.
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<CheckboxDemo />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
## Installation
|
|
|
|
1. Create a new file `Checkbox.mdx` in your component folder.
|
|
2. Copy and paste the following code into the file.
|
|
|
|
<LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Checkbox } from "@components/Checkbox";
|
|
```
|
|
|
|
```html
|
|
<Checkbox />
|
|
```
|
|
|
|
## Props
|
|
|
|
### Variants
|
|
|
|
| Prop | Type | Default | Description |
|
|
| :---- | :---- | :------- | :----------- |
|
|
| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
|
|
|
|
## Examples
|
|
|
|
### Text
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Text />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/components/CheckboxBlocks/Examples/Text.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Disabled
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Disabled />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/components/CheckboxBlocks/Examples/Disabled.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|