60 lines
1.2 KiB
TypeScript
60 lines
1.2 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>
|
|
);
|
|
};
|