87 lines
1.6 KiB
TypeScript
87 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { Checkbox } from "../components/Checkbox";
|
|
import { Label } from "../components/Label";
|
|
import { Toaster, useToast } from "../components/Toast";
|
|
|
|
export default {
|
|
title: "React/Checkbox",
|
|
};
|
|
|
|
export const Default = () => {
|
|
return <Checkbox />;
|
|
};
|
|
|
|
export const DefaultChecked = () => {
|
|
return <Checkbox defaultChecked />;
|
|
};
|
|
|
|
export const Controlled = () => {
|
|
const [state, setState] = React.useState(false);
|
|
const { toast } = useToast();
|
|
|
|
React.useEffect(() => {
|
|
toast({
|
|
title: "Checkbox Toggled",
|
|
description: `Checkbox state changed to ${state}`,
|
|
status: state ? "success" : "error",
|
|
});
|
|
}, [state]);
|
|
|
|
return (
|
|
<>
|
|
<Toaster />
|
|
<Checkbox
|
|
checked={state}
|
|
onChange={(e) => {
|
|
setState(e.currentTarget.checked);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const UsingWithLabel = () => {
|
|
return (
|
|
<Label direction="horizontal">
|
|
<Checkbox />
|
|
<span>Check this out</span>
|
|
</Label>
|
|
);
|
|
};
|
|
|
|
export const Disabled = () => {
|
|
return (
|
|
<Label direction="horizontal">
|
|
<Checkbox disabled />
|
|
<span>Disabled checkbox</span>
|
|
</Label>
|
|
);
|
|
};
|
|
|
|
export const BaseSize = () => {
|
|
return (
|
|
<Label direction="horizontal">
|
|
<Checkbox size="base" />
|
|
<span>Base</span>
|
|
</Label>
|
|
);
|
|
};
|
|
|
|
export const MediumSize = () => {
|
|
return (
|
|
<Label direction="horizontal">
|
|
<Checkbox size="md" />
|
|
<span>Medium</span>
|
|
</Label>
|
|
);
|
|
};
|
|
|
|
export const LargeSize = () => {
|
|
return (
|
|
<Label direction="horizontal">
|
|
<Checkbox size="lg" />
|
|
<span>Large</span>
|
|
</Label>
|
|
);
|
|
};
|