Option tileforms
Selectable card group (choicebox) for single or multiple choice with title, description, trailing slot and native radio or checkbox semantics.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/option-tile의존 아이템style
Default
option-tile-demo.tsx
"use client";
import * as React from "react";import { OptionTileGroup } from "@/components/ui/option-tile";
const plans = [ { value: "flex", title: "Flexible", description: "Free cancellation until 24 hours before", trailing: "$120" }, { value: "saver", title: "Saver", description: "Non-refundable", trailing: "$99" }, { value: "member", title: "Member", description: "Members only", trailing: "$89", disabled: true },];
export default function OptionTileDemo() { const [plan, setPlan] = React.useState<string | null>("flex"); return ( <div className="flex w-96 flex-col gap-2"> <OptionTileGroup aria-label="Rate plan" name="plan" options={plans} value={plan} onValueChange={setPlan} /> <p className="text-sm text-muted-foreground">Plan: {plan ?? "none"}</p> </div> );}