100 lines
2.6 KiB
Markdown
100 lines
2.6 KiB
Markdown
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
Examples,
|
|
Example,
|
|
Note,
|
|
Title,
|
|
CustomArgsTable,
|
|
VariantsTable,
|
|
VariantRow,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import { CheckboxField as Checkbox } from "./Checkbox";
|
|
|
|
<Meta title="UI/Form/Checkbox" component={Checkbox} />
|
|
|
|
<Title title="Checkbox " suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
|
|
|
## Definition
|
|
|
|
Checkboxes are used in forms and databases to indicate an answer to a question, apply a batch of settings or allow the user to make a multi-selection from a list. Alternatively, a single checkbox may be used for making single selections
|
|
|
|
## Structure
|
|
|
|
<CustomArgsTable of={Checkbox} />
|
|
|
|
<Examples title="Checkbox style">
|
|
<Example title="Default">
|
|
<Checkbox label="Default" />
|
|
</Example>
|
|
<Example title="Error">
|
|
<Checkbox label="Error" error />
|
|
</Example>
|
|
<Example title="Disabled">
|
|
<Checkbox label="Disabled" disabled />
|
|
</Example>
|
|
<Example title="Disabled">
|
|
<Checkbox label="Disabled Checked" checked disabled />
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Examples title="Description As Label">
|
|
<Example title="Default">
|
|
<Checkbox descriptionAsLabel description="Default Description" />
|
|
</Example>
|
|
<Example title="Error">
|
|
<Checkbox descriptionAsLabel description="Default Description" error />
|
|
</Example>
|
|
<Example title="Disabled">
|
|
<Checkbox descriptionAsLabel description="Default Description" disabled />
|
|
</Example>
|
|
<Example title="Disabled">
|
|
<Checkbox descriptionAsLabel description="Default Description" disabled checked />
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Checkbox"
|
|
args={{
|
|
label: "Default",
|
|
description: "Default Description",
|
|
error: false,
|
|
disabled: false,
|
|
}}
|
|
argTypes={{
|
|
label: {
|
|
control: {
|
|
type: "text",
|
|
},
|
|
},
|
|
description: {
|
|
control: {
|
|
type: "text",
|
|
},
|
|
},
|
|
error: {
|
|
control: {
|
|
type: "boolean",
|
|
},
|
|
},
|
|
disabled: {
|
|
control: {
|
|
type: "boolean",
|
|
},
|
|
},
|
|
}}>
|
|
{({ label, description, error, disabled }) => (
|
|
<VariantsTable titles={[""]} columnMinWidth={150}>
|
|
<VariantRow variant="Default">
|
|
<Checkbox label={label} error={error} disabled={disabled} />
|
|
</VariantRow>
|
|
<VariantRow variant="Description As Label">
|
|
<Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel />
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
)}
|
|
</Story>
|
|
</Canvas>
|