A pricing card with a collapsible section that reveals advanced input fields such as tax rate and discount.
"use client";
import { Settings2Icon } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/v-collapsible-5-utils/button";
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/components/ui/v-collapsible-5-utils/card";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/v-collapsible-5-utils/collapsible";
import { Field, FieldLabel } from "@/components/ui/v-collapsible-5-utils/field";
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
InputGroupText,
} from "@/components/ui/v-collapsible-5-utils/input-group";
function Pattern() {
const [isOpen, setIsOpen] = useState(true);
return (
<div className="w-full max-w-xs">
<Card>
<CardHeader>
<CardTitle>Unit Pricing</CardTitle>
</CardHeader>
<CardContent>
<Collapsible
className="flex flex-col gap-3"
onOpenChange={setIsOpen}
open={isOpen}
>
<div className="flex items-end gap-2">
<Field className="flex-1">
<FieldLabel className="sr-only">Base Price</FieldLabel>
<InputGroup>
<InputGroupInput
defaultValue="19.00"
placeholder="0.00"
type="number"
/>
<InputGroupAddon align="inline-end">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Field>
<CollapsibleTrigger
render={
<Button className="shrink-0" size="icon" variant="outline" />
}
>
<Settings2Icon aria-hidden="true" className="size-3.5" />
</CollapsibleTrigger>
</div>
<CollapsibleContent className="flex flex-col gap-3 data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
<Field>
<FieldLabel>Tax Rate (%)</FieldLabel>
<InputGroup>
<InputGroupInput
defaultValue="15"
placeholder="0"
type="number"
/>
<InputGroupAddon align="inline-end">
<InputGroupText>%</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Field>
<Field>
<FieldLabel>Discount (%)</FieldLabel>
<InputGroup>
<InputGroupInput
defaultValue="0"
placeholder="0"
type="number"
/>
<InputGroupAddon align="inline-end">
<InputGroupText>%</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Field>
</CollapsibleContent>
</Collapsible>
</CardContent>
</Card>
</div>
);
}
export default function Default() {
return (
<div className="flex min-h-[420px] w-full items-center justify-center p-6">
<Pattern />
</div>
);
}
Part of Cnippet — browse the full library on 21st.dev.