ドキュメント
チェックボックス
チェックボックス
ユーザーがチェック状態と非チェック状態を切り替えることができるコントロールです。
import {
Checkbox,
CheckboxControl,
CheckboxLabel,
} from "@repo/tailwindcss/ui/checkbox";
const CheckboxDemo = () => {
return (
<Checkbox class="flex items-center space-x-2">
<CheckboxControl />
<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
Accept terms and conditions
</CheckboxLabel>
</Checkbox>
);
};
export default CheckboxDemo;インストール
npx shadcn-solid@latest add checkbox以下の依存関係をインストールします
npm install @kobalte/core以下のコードをプロジェクトにコピー＆ペーストします
import { cn } from "@/libs/cn";
import type { CheckboxControlProps } from "@kobalte/core/checkbox";
import { Checkbox as CheckboxPrimitive } from "@kobalte/core/checkbox";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ValidComponent, VoidProps } from "solid-js";
import { splitProps } from "solid-js";
export const CheckboxLabel = CheckboxPrimitive.Label;
export const Checkbox = CheckboxPrimitive;
export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage;
export const CheckboxDescription = CheckboxPrimitive.Description;
type checkboxControlProps<T extends ValidComponent = "div"> = VoidProps<
CheckboxControlProps<T> & { class?: string }
>;
export const CheckboxControl = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, checkboxControlProps<T>>,
) => {
const [local, rest] = splitProps(props as checkboxControlProps, [
"class",
"children",
]);
return (
<>
<CheckboxPrimitive.Input class="[&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-[1.5px] [&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-2 [&:focus-visible+div]:ring-offset-background" />
<CheckboxPrimitive.Control
class={cn(
"h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[checked]:bg-primary data-[checked]:text-primary-foreground data-[disabled]:opacity-50",
local.class,
)}
{...rest}
>
<CheckboxPrimitive.Indicator class="flex items-center justify-center text-current">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="h-4 w-4"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m5 12l5 5L20 7"
/>
<title>Checkbox</title>
</svg>
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Control>
</>
);
};以下の依存関係をインストールします
npm install @kobalte/core以下のコードをプロジェクトにコピー＆ペーストします
import { cn } from "@/libs/cn";
import type { CheckboxControlProps } from "@kobalte/core/checkbox";
import { Checkbox as CheckboxPrimitive } from "@kobalte/core/checkbox";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ValidComponent, VoidProps } from "solid-js";
import { splitProps } from "solid-js";
export const CheckboxLabel = CheckboxPrimitive.Label;
export const Checkbox = CheckboxPrimitive;
export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage;
export const CheckboxDescription = CheckboxPrimitive.Description;
type checkboxControlProps<T extends ValidComponent = "div"> = VoidProps<
CheckboxControlProps<T> & { class?: string }
>;
export const CheckboxControl = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, checkboxControlProps<T>>,
) => {
const [local, rest] = splitProps(props as checkboxControlProps, [
"class",
"children",
]);
return (
<>
<CheckboxPrimitive.Input class="[&:focus-visible+div]:(outline-none ring-1.5 ring-ring ring-offset-2 ring-offset-background)" />
<CheckboxPrimitive.Control
class={cn(
"h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:(outline-none ring-1.5 ring-ring) data-[disabled]:(cursor-not-allowed opacity-50) data-[checked]:(bg-primary text-primary-foreground) transition-shadow",
local.class,
)}
{...rest}
>
<CheckboxPrimitive.Indicator class="flex items-center justify-center text-current">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="h-4 w-4"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m5 12l5 5L20 7"
/>
<title>Checkbox</title>
</svg>
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Control>
</>
);
};使用方法
import { Checkbox, CheckboxControl } from "@/components/ui/checkbox";<Checkbox>
<CheckboxControl />
</Checkbox>使用例
テキスト付き
import {
Checkbox,
CheckboxControl,
CheckboxDescription,
CheckboxLabel,
} from "@repo/tailwindcss/ui/checkbox";
const CheckboxWithTextDemo = () => {
return (
<Checkbox class="flex items-start space-x-2">
<CheckboxControl />
<div class="grid gap-1.5 leading-none">
<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
Accept terms and conditions
</CheckboxLabel>
<CheckboxDescription class="text-sm text-muted-foreground">
You agree to our Terms of Service and Privacy Policy.
</CheckboxDescription>
</div>
</Checkbox>
);
};
export default CheckboxWithTextDemo;無効
import {
Checkbox,
CheckboxControl,
CheckboxLabel,
} from "@repo/tailwindcss/ui/checkbox";
const CheckboxDisabledDemo = () => {
return (
<Checkbox class="flex items-center space-x-2" disabled>
<CheckboxControl />
<CheckboxLabel class="data-[disabled]:(cursor-not-allowed opacity-70) text-sm font-medium leading-none">
Accept terms and conditions
</CheckboxLabel>
</Checkbox>
);
};
export default CheckboxDisabledDemo;