p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Checkbox docs

Browse Source
This commit is contained in:
p-sw 2024-06-02 03:24:13 +09:00
parent 9a76ddfaa2
commit efac10d91b
1 changed files with 131 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
packages/react/src/docs/components/Checkbox.mdx Normal file
View File

@ -0,0 +1,131 @@
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";
# 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">
<Label direction="horizontal">
<Checkbox />
<span>Checkbox</span>
</Label>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function CheckboxExample() {
return (
<Label direction="horizontal">
<Checkbox />
<span>Checkbox</span>
</Label>
);
}
```
</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="https://raw.githubusercontent.com/p-sw/ui/main/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">
<Label direction="horizontal">
<Checkbox size="base" />
<p>Agree terms and conditions</p>
</Label>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function CheckboxExample() {
return (
<Label direction="horizontal">
<Checkbox size="base" />
<span>Agree terms and conditions</span>
</Label>
);
}
```
</TabContent>
</TabProvider>
### Disabled
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Label direction="horizontal">
<Checkbox size="base" disabled />
<span>Agree terms and conditions</span>
</Label>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function CheckboxExample() {
return (
<Label direction="horizontal">
<Checkbox size="base" disabled />
<span>Agree terms and conditions</span>
</Label>
);
}
```
</TabContent>
</TabProvider>