mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-11 09:51:40 +00:00
86d9b00084
* feat: init * fix * fix * fix * feat * feat * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: implement icons * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: update init command * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: dialog * feat * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: add registry:base item type * feat: rename frame to canva * fix * feat * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fi * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: add all colors * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: add outfit font * fix * fix * fix * fix * fix * chore: changeset * fix * fix * fix * fix * fix * fix * fix * fix
4958 lines
184 KiB
TypeScript
4958 lines
184 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import {
|
|
IconCircle,
|
|
IconCircleCheckFilled,
|
|
IconInfoCircle,
|
|
IconMinus,
|
|
IconPlus,
|
|
IconUsers,
|
|
IconWorld,
|
|
} from "@tabler/icons-react"
|
|
import { addDays, format } from "date-fns"
|
|
import { REGEXP_ONLY_DIGITS } from "input-otp"
|
|
import {
|
|
CalendarIcon,
|
|
ClockIcon,
|
|
DownloadIcon,
|
|
FileTextIcon,
|
|
FolderIcon,
|
|
MonitorIcon,
|
|
} from "lucide-react"
|
|
import { type DateRange } from "react-day-picker"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@/registry/new-york-v4/ui/avatar"
|
|
import { Badge } from "@/registry/new-york-v4/ui/badge"
|
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
|
import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
|
|
import { Calendar } from "@/registry/new-york-v4/ui/calendar"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/new-york-v4/ui/card"
|
|
import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
|
|
import {
|
|
Field,
|
|
FieldContent,
|
|
FieldDescription,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldLegend,
|
|
FieldSeparator,
|
|
FieldSet,
|
|
FieldTitle,
|
|
} from "@/registry/new-york-v4/ui/field"
|
|
import { Input } from "@/registry/new-york-v4/ui/input"
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
} from "@/registry/new-york-v4/ui/input-group"
|
|
import {
|
|
InputOTP,
|
|
InputOTPGroup,
|
|
InputOTPSeparator,
|
|
InputOTPSlot,
|
|
} from "@/registry/new-york-v4/ui/input-otp"
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/registry/new-york-v4/ui/popover"
|
|
import {
|
|
RadioGroup,
|
|
RadioGroupItem,
|
|
} from "@/registry/new-york-v4/ui/radio-group"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/registry/new-york-v4/ui/select"
|
|
import { Separator } from "@/registry/new-york-v4/ui/separator"
|
|
import { Slider } from "@/registry/new-york-v4/ui/slider"
|
|
import { Switch } from "@/registry/new-york-v4/ui/switch"
|
|
import { Textarea } from "@/registry/new-york-v4/ui/textarea"
|
|
import {
|
|
ToggleGroup,
|
|
ToggleGroupItem,
|
|
} from "@/registry/new-york-v4/ui/toggle-group"
|
|
|
|
export function FieldDemo() {
|
|
return (
|
|
<div className="@container w-full">
|
|
<div className="bg-muted grid gap-4 p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
|
|
<div className="flex flex-col gap-6">
|
|
<BasicFields />
|
|
<PrivacySettings />
|
|
<HearAboutUs />
|
|
<ClusterConfig />
|
|
<ShippingMethods />
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<SubscriptionPlan />
|
|
<FormInputDemo />
|
|
<FormInputTypesDemo />
|
|
<FeedbackForm />
|
|
<JobApplicationForm />
|
|
<FormDatePickerDemo />
|
|
<LoginForm />
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<FormSpecialInputTypesDemo />
|
|
<FormTextareaDemo />
|
|
<FormSelectDemo />
|
|
<ProfileSettingsForm />
|
|
<FormFieldGroupOutlineDemo />
|
|
<SurveyForm />
|
|
<SignupForm />
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<FormRadioDemo />
|
|
<FormCheckboxDemo />
|
|
<FormSliderDemo />
|
|
<NewsletterForm />
|
|
<PaymentForm />
|
|
<ContactForm />
|
|
<ComplexFormDemo />
|
|
<ComplexFormInvalidDemo />
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<CheckoutForm />
|
|
<FormSwitchDemo />
|
|
<FormToggleGroupDemo />
|
|
<FormOTPDemo />
|
|
<FormFieldSetDemo />
|
|
<FormFieldSeparatorDemo />
|
|
<FinderPreferencesForm />
|
|
</div>
|
|
<div className="flex flex-col gap-6"></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BasicFields() {
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<FieldSet>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="name-x8k">Name</FieldLabel>
|
|
<FieldDescription>
|
|
Enter your name so it is long enough to test the layout.
|
|
</FieldDescription>
|
|
<Input id="name-x8k" type="text" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="message-x8k">Message</FieldLabel>
|
|
<FieldDescription>
|
|
Enter your message so it is long enough to test the layout.
|
|
</FieldDescription>
|
|
<Textarea id="message-x8k" placeholder="Enter your message" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="message-x28k">Message</FieldLabel>
|
|
<Textarea id="message-x28k" placeholder="Enter your message" />
|
|
<FieldDescription>
|
|
Enter your message so it is long enough to test the layout.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="name-2-p9m">
|
|
Name{" "}
|
|
<Badge variant="secondary" className="ml-auto">
|
|
Recommended
|
|
</Badge>
|
|
</FieldLabel>
|
|
<Input id="name-2-p9m" type="text" />
|
|
<FieldDescription>
|
|
Enter your name so it is long enough to test the layout.
|
|
</FieldDescription>
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="terms-21f-q7r" />
|
|
<FieldLabel htmlFor="terms-21f-q7r">
|
|
Accept terms and conditions
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldLabel htmlFor="terms-21f-w4t">
|
|
Accept terms and conditions
|
|
</FieldLabel>
|
|
<Checkbox id="terms-21f-w4t" />
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldLabel htmlFor="dark-mode-b5n">Dark Mode</FieldLabel>
|
|
<Switch id="dark-mode-b5n" />
|
|
</Field>
|
|
<RadioGroup>
|
|
<Field orientation="horizontal">
|
|
<FieldLabel htmlFor="dark-mode-22-f3j">Dark Mode</FieldLabel>
|
|
<RadioGroupItem value="dark-mode-22" id="dark-mode-22-f3j" />
|
|
</Field>
|
|
</RadioGroup>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="enable-touch-id-m8v" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="enable-touch-id-m8v">
|
|
Enable Touch ID
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Enable Touch ID to quickly unlock your device.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="enable-touch-id-88v" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="enable-touch-id-88v">
|
|
Enable Touch ID and Face ID to make it even faster to unlock
|
|
your device. This is a long label to test the layout.
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Enable Touch ID to quickly unlock your device.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<FieldLabel htmlFor="enable-touch-id-m8x">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="enable-touch-id-m8x" />
|
|
<FieldContent>
|
|
<FieldTitle>Enable Touch ID</FieldTitle>
|
|
<FieldDescription>
|
|
Enable Touch ID to quickly unlock your device.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="enable-touch-id-18v">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="enable-touch-id-18v" />
|
|
<FieldContent>
|
|
<FieldTitle>
|
|
Enable Touch ID and Face ID to make it even faster to unlock
|
|
your device. This is a long label to test the layout.
|
|
</FieldTitle>
|
|
<FieldDescription>
|
|
Enable Touch ID to quickly unlock your device.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<RadioGroup className="gap-6">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="enable-touch-id-m10v"
|
|
id="enable-touch-id-m10v"
|
|
/>
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="enable-touch-id-m10v">
|
|
Enable Touch ID
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Enable Touch ID to quickly unlock your device.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="enable-touch-id-m10v"
|
|
id="enable-touch-id-m10v"
|
|
/>
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="enable-touch-id-m10v">
|
|
Enable Touch ID and Face ID to make it even faster to unlock
|
|
your device. This is a long label to test the layout.
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Enable Touch ID to quickly unlock your device.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</RadioGroup>
|
|
<RadioGroup className="gap-3">
|
|
<FieldLabel htmlFor="enable-touch-id-m2222v">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="enable-touch-id-m2222v"
|
|
id="enable-touch-id-m2222v"
|
|
/>
|
|
<FieldContent>
|
|
<FieldTitle>Enable Touch ID</FieldTitle>
|
|
<FieldDescription>
|
|
Enable Touch ID to quickly unlock your device.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="enable-touch-id-m10xx">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="enable-touch-id-m10xx"
|
|
id="enable-touch-id-m10xx"
|
|
/>
|
|
<FieldContent>
|
|
<FieldTitle>
|
|
Enable Touch ID and Face ID to make it even faster to
|
|
unlock your device. This is a long label to test the
|
|
layout.
|
|
</FieldTitle>
|
|
<FieldDescription>
|
|
Enable Touch ID to quickly unlock your device.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend variant="label">Battery Level</FieldLegend>
|
|
<FieldDescription>
|
|
Choose your preferred battery level.
|
|
</FieldDescription>
|
|
<RadioGroup>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="high" id="battery-level-high-k6p" />
|
|
<FieldLabel htmlFor="battery-level-high-k6p">High</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="medium"
|
|
id="battery-level-medium-z9l"
|
|
/>
|
|
<FieldLabel htmlFor="battery-level-medium-z9l">
|
|
Medium
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="low" id="battery-level-low-v1c" />
|
|
<FieldLabel htmlFor="battery-level-low-v1c">Low</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend variant="label">
|
|
Search Results Search Results
|
|
</FieldLegend>
|
|
<FieldDescription>
|
|
Only selected categories will appear in search results.
|
|
</FieldDescription>
|
|
<FieldGroup className="gap-3">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="search-results-application-r8s" />
|
|
<FieldLabel htmlFor="search-results-application-r8s">
|
|
Application
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="search-results-music-n3w" />
|
|
<FieldLabel htmlFor="search-results-music-n3w">
|
|
Music
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="search-results-video-u7y" />
|
|
<FieldLabel htmlFor="search-results-video-u7y">
|
|
Video
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="search-results-photo-a4e" />
|
|
<FieldLabel htmlFor="search-results-photo-a4e">
|
|
Photo
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="search-results-document-i9o" />
|
|
<FieldLabel htmlFor="search-results-document-i9o">
|
|
Document
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="search-results-other-h2k" />
|
|
<FieldLabel htmlFor="search-results-other-h2k">
|
|
Other
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Measurement System</FieldLegend>
|
|
<FieldDescription>
|
|
Select your preferred measurement system.
|
|
</FieldDescription>
|
|
<RadioGroup>
|
|
<FieldLabel htmlFor="metric-l6m">
|
|
<Field orientation="horizontal">
|
|
<FieldTitle>Metric</FieldTitle>
|
|
<RadioGroupItem value="metric" id="metric-l6m" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="imperial" id="imperial-x8j" />
|
|
<FieldTitle>Imperial</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="custom-units-p3v">
|
|
<Field orientation="horizontal">
|
|
<FieldTitle>Custom</FieldTitle>
|
|
<RadioGroupItem
|
|
value="custom-units"
|
|
id="custom-units-p3v"
|
|
/>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function SubscriptionPlan() {
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Subscription Plan</FieldLegend>
|
|
<FieldDescription>Choose your subscription plan.</FieldDescription>
|
|
<RadioGroup defaultValue="plus">
|
|
<FieldLabel htmlFor="plus-g4s">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Plus</FieldTitle>
|
|
<FieldDescription>
|
|
For individuals and small teams
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem value="plus" id="plus-g4s" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="pro-m9d">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Pro</FieldTitle>
|
|
<FieldDescription>
|
|
For individuals and small teams
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem value="pro" id="pro-m9d" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="enterprise-k7w">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Enterprise</FieldTitle>
|
|
<FieldDescription>
|
|
For large teams and enterprises
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem value="enterprise" id="enterprise-k7w" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="custom-plan-r3t">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Custom</FieldTitle>
|
|
<FieldDescription>
|
|
For large teams and enterprises
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem value="custom-plan" id="custom-plan-r3t" />
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Display Settings</FieldLegend>
|
|
<FieldDescription>Manage your display settings.</FieldDescription>
|
|
<Field>
|
|
<FieldLabel htmlFor="increase-contrast-b8h">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Increase Contrast</FieldTitle>
|
|
<FieldDescription>
|
|
Increase the contrast of the UI to make it easier to read.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="increase-contrast-b8h" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="reduce-transparency-v5l">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Reduce Transparency</FieldTitle>
|
|
<FieldDescription>
|
|
Reduce the transparency of the UI to make it easier to
|
|
read.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="reduce-transparency-v5l" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="reduce-motion-n2j">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Reduce Motion</FieldTitle>
|
|
<FieldDescription>
|
|
Reduce motion of the UI to make it easier to read.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="reduce-motion-n2j" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="enable-dark-mode-w6q">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Enable Dark Mode</FieldTitle>
|
|
<FieldDescription>
|
|
Enable dark mode to make the UI easier to read.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="enable-dark-mode-w6q" />
|
|
</Field>
|
|
</FieldLabel>
|
|
</Field>
|
|
<FieldSet>
|
|
<FieldLegend>Display Resolution</FieldLegend>
|
|
<FieldDescription>
|
|
Select your preferred display resolution.
|
|
</FieldDescription>
|
|
<RadioGroup className="grid grid-cols-2 gap-2">
|
|
<FieldLabel htmlFor="1080p-z4c">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="1080p" id="1080p-z4c" />
|
|
<FieldTitle>1920x1080</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="1440p-x7y">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="1440p" id="1440p-x7y" />
|
|
<FieldTitle>2560x1440</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="4k-p1v">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="4k" id="4k-p1v" />
|
|
<FieldTitle>3840x2160</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="8k-u9e">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="8k" id="8k-u9e" />
|
|
<FieldTitle>7680x4320</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function PrivacySettings() {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Privacy Settings</CardTitle>
|
|
<CardDescription>
|
|
Choose who can see your profile and what they can see.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RadioGroup>
|
|
<FieldLabel htmlFor="everyone-f8k">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>
|
|
Everyone <Badge className="rounded-full">Default</Badge>
|
|
</FieldTitle>
|
|
<FieldDescription>
|
|
Anyone can see your profile.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem
|
|
value="everyone"
|
|
id="everyone-f8k"
|
|
className="sr-only"
|
|
/>
|
|
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
|
|
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="followers-s7m">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Followers</FieldTitle>
|
|
<FieldDescription>
|
|
Visible to your followers and connections.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem
|
|
value="followers"
|
|
id="followers-s7m"
|
|
className="sr-only"
|
|
/>
|
|
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
|
|
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="custom-q3r">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Custom</FieldTitle>
|
|
<FieldDescription>
|
|
Choose who can see your profile.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem
|
|
value="custom"
|
|
id="custom-q3r"
|
|
className="sr-only"
|
|
/>
|
|
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
|
|
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Privacy Settings</CardTitle>
|
|
<CardDescription>
|
|
Choose who can see your profile and what they can see.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RadioGroup>
|
|
<FieldLabel htmlFor="everyone-b9p">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="everyone" id="everyone-b9p" />
|
|
<FieldContent>
|
|
<FieldTitle>Everyone</FieldTitle>
|
|
<FieldDescription>
|
|
Anyone can see your profile.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="followers-v3n">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="followers" id="followers-v3n" />
|
|
<FieldContent>
|
|
<FieldTitle>Followers</FieldTitle>
|
|
<FieldDescription>
|
|
Visible to your followers and connections.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="custom-t8v">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="custom" id="custom-t8v" />
|
|
<FieldContent>
|
|
<FieldTitle>Custom</FieldTitle>
|
|
<FieldDescription>
|
|
Choose who can see your profile.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Button variant="outline" className="w-fit">
|
|
Choose
|
|
</Button>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Privacy Settings</CardTitle>
|
|
<CardDescription>
|
|
Choose who can see your profile and what they can see.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RadioGroup>
|
|
<FieldLabel htmlFor="everyone-3-k4p">
|
|
<Field orientation="horizontal">
|
|
<div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
|
|
<IconWorld className="size-4" />
|
|
</div>
|
|
<FieldContent>
|
|
<FieldTitle>Everyone</FieldTitle>
|
|
<FieldDescription>
|
|
Anyone can see your profile.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem
|
|
value="everyone"
|
|
id="everyone-3-k4p"
|
|
className="sr-only"
|
|
/>
|
|
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
|
|
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="followers-3-m7j">
|
|
<Field orientation="horizontal">
|
|
<div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
|
|
<IconUsers className="size-4" />
|
|
</div>
|
|
<FieldContent>
|
|
<FieldTitle>Followers</FieldTitle>
|
|
<FieldDescription>
|
|
Visible to your followers and connections.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem
|
|
value="followers-3"
|
|
id="followers-3-m7j"
|
|
className="sr-only"
|
|
/>
|
|
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
|
|
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="custom-3-r9w">
|
|
<Field orientation="horizontal">
|
|
<div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
|
|
<IconPlus className="size-4" />
|
|
</div>
|
|
<FieldContent>
|
|
<FieldTitle>Custom</FieldTitle>
|
|
<FieldDescription>
|
|
Choose who can see your profile.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem
|
|
value="custom-3"
|
|
id="custom-3-r9w"
|
|
className="sr-only"
|
|
/>
|
|
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
|
|
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function HearAboutUs() {
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>How did you hear about us?</FieldLegend>
|
|
<FieldDescription>
|
|
Select the option that best describes how you heard about us.
|
|
</FieldDescription>
|
|
<FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem] **:data-[slot=checkbox]:rounded-full **:data-[slot=field]:gap-2 **:data-[slot=field]:overflow-hidden **:data-[slot=field]:px-2.5 **:data-[slot=field]:py-2 *:data-[slot=field-label]:w-fit">
|
|
<FieldLabel htmlFor="social-media-b2s">
|
|
<Field orientation="horizontal">
|
|
<Checkbox
|
|
value="social-media"
|
|
id="social-media-b2s"
|
|
className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
|
|
/>
|
|
<FieldTitle>Social Media</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="search-engine-f6h">
|
|
<Field orientation="horizontal">
|
|
<Checkbox
|
|
value="search-engine"
|
|
id="search-engine-f6h"
|
|
className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
|
|
/>
|
|
<FieldTitle>Search Engine</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="referral-l3n">
|
|
<Field orientation="horizontal">
|
|
<Checkbox
|
|
value="referral"
|
|
id="referral-l3n"
|
|
className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
|
|
/>
|
|
<FieldTitle>Referral</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="other-u5c">
|
|
<Field orientation="horizontal">
|
|
<Checkbox
|
|
value="other"
|
|
id="other-u5c"
|
|
className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
|
|
/>
|
|
<FieldTitle>Other (Please specify)</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function ClusterConfig() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Buy your cluster</CardTitle>
|
|
<CardDescription>
|
|
Need a custom setup? <a href="#">Contact us</a>.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>GPU Type</FieldLegend>
|
|
<FieldDescription>
|
|
Select the GPU type for your cluster.
|
|
</FieldDescription>
|
|
<RadioGroup defaultValue="h100">
|
|
<FieldLabel htmlFor="h100-k9s">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="h100" id="h100-k9s" />
|
|
<FieldContent>
|
|
<FieldTitle>NVIDIA H100</FieldTitle>
|
|
<FieldDescription>SXM5 80GB VRAM</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="h200-m3v">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="h200" id="h200-m3v" />
|
|
<FieldContent>
|
|
<FieldTitle>NVIDIA H200</FieldTitle>
|
|
<FieldDescription>SXM5 141GB VRAM</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<Field>
|
|
<FieldLabel htmlFor="compute-environment-p8w">
|
|
Compute Environment
|
|
</FieldLabel>
|
|
<RadioGroup defaultValue="kubernetes">
|
|
<FieldLabel htmlFor="kubernetes-r2h">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="kubernetes" id="kubernetes-r2h" />
|
|
<FieldContent>
|
|
<FieldTitle>Kubernetes</FieldTitle>
|
|
<FieldDescription>
|
|
Run GPU workloads on a K8s configured cluster.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="vm-z4k">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="vm" id="vm-z4k" />
|
|
<FieldContent>
|
|
<FieldTitle>Virtual Machine</FieldTitle>
|
|
<FieldDescription>
|
|
Access a VM configured cluster via SSH to run GPU
|
|
workloads.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="number-of-gpus-f6l">
|
|
Number of GPUs
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Buy a single node with 8 GPUs or many interconnected nodes. You
|
|
can add more GPUs later.
|
|
</FieldDescription>
|
|
<ButtonGroup>
|
|
<Input />
|
|
<Button variant="outline" size="icon">
|
|
<IconMinus />
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlus />
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Field>
|
|
<FieldSet>
|
|
<FieldLegend>Starting date</FieldLegend>
|
|
<RadioGroup defaultValue="today">
|
|
<FieldLabel htmlFor="today-n7t">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="today" id="today-n7t" />
|
|
<FieldContent>
|
|
<FieldTitle>Start cluster now</FieldTitle>
|
|
<FieldDescription>
|
|
Your cluster will be ready to use immediately.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="scheduled-u5j">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="scheduled" id="scheduled-u5j" />
|
|
<FieldContent>
|
|
<FieldTitle>Schedule a start date and time</FieldTitle>
|
|
<FieldDescription>
|
|
Set a start date and time for your cluster.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<Field>
|
|
<FieldLabel htmlFor="duration-b9p">Duration</FieldLabel>
|
|
<FieldDescription>You can add more time later.</FieldDescription>
|
|
<ButtonGroup>
|
|
<Input />
|
|
<Select defaultValue="hours">
|
|
<SelectTrigger id="duration-b9p" className="w-24">
|
|
<SelectValue placeholder="Select duration" />
|
|
</SelectTrigger>
|
|
<SelectContent align="end">
|
|
<SelectItem value="hours">Hours</SelectItem>
|
|
<SelectItem value="days">Days</SelectItem>
|
|
<SelectItem value="weeks">Weeks</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</ButtonGroup>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Button type="submit">Get Instant Quote</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function ShippingMethods() {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardContent>
|
|
<FieldSet>
|
|
<FieldLegend>Shipping Method</FieldLegend>
|
|
<FieldDescription>
|
|
Select the shipping method for your order.
|
|
</FieldDescription>
|
|
<RadioGroup>
|
|
<FieldLabel htmlFor="pickup-x8m">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="pickup" id="pickup-x8m" />
|
|
<FieldContent>
|
|
<FieldTitle>
|
|
Pick up your order at a nearby store
|
|
</FieldTitle>
|
|
<FieldDescription>
|
|
Available at most stores.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Badge
|
|
variant="secondary"
|
|
className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
|
|
>
|
|
Free
|
|
</Badge>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="delivery-v3s">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="delivery" id="delivery-v3s" />
|
|
<FieldContent>
|
|
<FieldTitle>Delivery to your door</FieldTitle>
|
|
<FieldDescription>
|
|
We will deliver your order to your door.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Badge
|
|
variant="secondary"
|
|
className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
|
|
>
|
|
$10.00
|
|
</Badge>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="express-l7r">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="express" id="express-l7r" />
|
|
<FieldContent>
|
|
<FieldTitle>Express delivery</FieldTitle>
|
|
<FieldDescription>
|
|
Next day delivery. Available in most areas.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Badge
|
|
variant="secondary"
|
|
className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
|
|
>
|
|
$15.00
|
|
</Badge>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
<form>
|
|
<FieldGroup className="bg-background gap-6 rounded-lg border p-6">
|
|
<FieldSet>
|
|
<FieldLegend>GPU Type</FieldLegend>
|
|
<FieldDescription>
|
|
Select the GPU type for your cluster.
|
|
</FieldDescription>
|
|
<RadioGroup defaultValue="h100">
|
|
<FieldLabel htmlFor="h100-v00">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="h100" id="h100-v00" />
|
|
<FieldContent>
|
|
<FieldTitle>NVIDIA H100</FieldTitle>
|
|
<FieldDescription>SXM5 80GB VRAM</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="h200-n86">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="h200" id="h200-n86" />
|
|
<FieldContent>
|
|
<FieldTitle>NVIDIA H200</FieldTitle>
|
|
<FieldDescription>SXM5 141GB VRAM</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Compute Environment</FieldLegend>
|
|
<FieldDescription>
|
|
Select the compute environment for your cluster.
|
|
</FieldDescription>
|
|
<RadioGroup defaultValue="kubernetes">
|
|
<FieldLabel htmlFor="kubernetes-dtv">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="kubernetes" id="kubernetes-dtv" />
|
|
<FieldContent>
|
|
<FieldTitle>Kubernetes</FieldTitle>
|
|
<FieldDescription>
|
|
Run GPU workloads on a K8s configured cluster.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="vm-8rk">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="vm" id="vm-8rk" />
|
|
<FieldContent>
|
|
<FieldTitle>Virtual Machine</FieldTitle>
|
|
<FieldDescription>
|
|
Access a VM configured cluster via SSH to run GPU
|
|
workloads.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Starting date</FieldLegend>
|
|
<FieldDescription>
|
|
When you want to start your cluster.
|
|
</FieldDescription>
|
|
<RadioGroup defaultValue="today">
|
|
<FieldLabel htmlFor="today-pmd">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="today" id="today-pmd" />
|
|
<FieldContent>
|
|
<FieldTitle>Start cluster now</FieldTitle>
|
|
<FieldDescription>
|
|
Your cluster will be ready to use immediately.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="scheduled-tc9">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="scheduled" id="scheduled-tc9" />
|
|
<FieldContent>
|
|
<FieldTitle>Schedule a start date and time</FieldTitle>
|
|
<FieldDescription>
|
|
Set a start date and time for your cluster.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<Field>
|
|
<Button type="submit">Get Instant Quote</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SignupForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Create an account</CardTitle>
|
|
<CardDescription>
|
|
Enter your information below to create your account
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="signup-name-us1">Full Name</FieldLabel>
|
|
<Input
|
|
id="signup-name-us1"
|
|
type="text"
|
|
placeholder="John Doe"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="signup-email-zvy">Email</FieldLabel>
|
|
<Input
|
|
id="signup-email-zvy"
|
|
type="email"
|
|
placeholder="m@example.com"
|
|
required
|
|
/>
|
|
<FieldDescription>
|
|
We'll use this to contact you. We will not share your email
|
|
with anyone else.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="signup-password-rh7">Password</FieldLabel>
|
|
<Input id="signup-password-rh7" type="password" required />
|
|
<FieldDescription>
|
|
Must be at least 8 characters long.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="signup-confirm-password-ha8">
|
|
Confirm Password
|
|
</FieldLabel>
|
|
<Input
|
|
id="signup-confirm-password-ha8"
|
|
type="password"
|
|
required
|
|
/>
|
|
<FieldDescription>Please confirm your password.</FieldDescription>
|
|
</Field>
|
|
<FieldGroup>
|
|
<Field>
|
|
<Button type="submit" className="w-full">
|
|
Create Account
|
|
</Button>
|
|
<Button variant="outline" className="w-full">
|
|
Sign up with Google
|
|
</Button>
|
|
</Field>
|
|
<Field>
|
|
<p className="text-center text-sm">
|
|
Already have an account?{" "}
|
|
<a href="#" className="underline underline-offset-4">
|
|
Sign in
|
|
</a>
|
|
</p>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function LoginForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Sign in to your account</CardTitle>
|
|
<CardDescription>
|
|
Enter your credentials to access your account
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="login-7x9-email-2kg">Email</FieldLabel>
|
|
<Input
|
|
id="login-7x9-email-2kg"
|
|
type="email"
|
|
placeholder="m@example.com"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="login-7x9-password-5l8">Password</FieldLabel>
|
|
<Input id="login-7x9-password-5l8" type="password" required />
|
|
<FieldDescription>
|
|
<a href="#" className="text-sm underline underline-offset-4">
|
|
Forgot your password?
|
|
</a>
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="login-7x9-remember-6lp" />
|
|
<FieldLabel
|
|
htmlFor="login-7x9-remember-6lp"
|
|
className="font-normal"
|
|
>
|
|
Remember me for 30 days
|
|
</FieldLabel>
|
|
</Field>
|
|
<Button type="submit" className="w-full">
|
|
Sign In
|
|
</Button>
|
|
|
|
<FieldSeparator />
|
|
|
|
<FieldGroup>
|
|
<Button variant="outline" className="w-full">
|
|
<svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
|
|
<path
|
|
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
|
fill="#4285F4"
|
|
/>
|
|
<path
|
|
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
|
fill="#34A853"
|
|
/>
|
|
<path
|
|
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
|
fill="#FBBC05"
|
|
/>
|
|
<path
|
|
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
|
fill="#EA4335"
|
|
/>
|
|
</svg>
|
|
Continue with Google
|
|
</Button>
|
|
<Button variant="outline" className="w-full">
|
|
<svg
|
|
className="mr-2 h-4 w-4"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
|
</svg>
|
|
Continue with GitHub
|
|
</Button>
|
|
<Button variant="outline" className="w-full">
|
|
<svg
|
|
className="mr-2 h-4 w-4"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z" />
|
|
</svg>
|
|
Continue with Facebook
|
|
</Button>
|
|
</FieldGroup>
|
|
|
|
<FieldSeparator>New to our platform?</FieldSeparator>
|
|
|
|
<Field>
|
|
<p className="text-center text-sm">
|
|
Don't have an account?{" "}
|
|
<a
|
|
href="#"
|
|
className="font-medium underline underline-offset-4"
|
|
>
|
|
Create an account
|
|
</a>
|
|
</p>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function FinderPreferencesForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Finder Preferences</CardTitle>
|
|
<CardDescription>
|
|
Configure what items appear on your desktop
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel>Show these items on the desktop:</FieldLabel>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-hard-disks-ljj" />
|
|
<FieldLabel
|
|
htmlFor="finder-pref-9k2-hard-disks-ljj"
|
|
className="font-normal"
|
|
>
|
|
Hard disks
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-external-disks-1yg" />
|
|
<FieldLabel
|
|
htmlFor="finder-pref-9k2-external-disks-1yg"
|
|
className="font-normal"
|
|
>
|
|
External disks
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
|
|
<FieldLabel
|
|
htmlFor="finder-pref-9k2-cds-dvds-fzt"
|
|
className="font-normal"
|
|
>
|
|
CDs, DVDs, and iPods
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-connected-servers-6l2" />
|
|
<FieldLabel
|
|
htmlFor="finder-pref-9k2-connected-servers-6l2"
|
|
className="font-normal"
|
|
>
|
|
Connected servers
|
|
</FieldLabel>
|
|
</Field>
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field>
|
|
<FieldLabel>New Finder windows show:</FieldLabel>
|
|
<Select defaultValue="home">
|
|
<SelectTrigger id="finder-pref-9k2-new-window-zga">
|
|
<SelectValue placeholder="Select location" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="recents">
|
|
<ClockIcon />
|
|
Recents
|
|
</SelectItem>
|
|
<SelectItem value="home">
|
|
<FolderIcon />
|
|
shadcn
|
|
</SelectItem>
|
|
<SelectItem value="desktop">
|
|
<MonitorIcon /> Desktop
|
|
</SelectItem>
|
|
<SelectItem value="documents">
|
|
<FileTextIcon /> Documents
|
|
</SelectItem>
|
|
<SelectItem value="downloads">
|
|
<DownloadIcon /> Downloads
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<InputGroup>
|
|
<InputGroupInput placeholder="Select location" />
|
|
<InputGroupAddon>
|
|
<IconInfoCircle />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-sync-folders-nep" defaultChecked />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="finder-pref-9k2-sync-folders-nep">
|
|
Sync Desktop & Documents folders
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Your Desktop & Documents folders are being synced with iCloud
|
|
Drive. You can access them from other devices.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-open-tabs-uui" defaultChecked />
|
|
<FieldLabel htmlFor="finder-pref-9k2-open-tabs-uui">
|
|
Open folders in tabs instead of new windows
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function ContactForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Contact Us</CardTitle>
|
|
<CardDescription>
|
|
Get in touch with our team for any questions or support
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="contact-3k1-firstName-ggc">
|
|
First Name
|
|
</FieldLabel>
|
|
<Input
|
|
id="contact-3k1-firstName-ggc"
|
|
placeholder="John"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="contact-3k2-lastName-m0n">
|
|
Last Name
|
|
</FieldLabel>
|
|
<Input
|
|
id="contact-3k2-lastName-m0n"
|
|
placeholder="Doe"
|
|
required
|
|
/>
|
|
</Field>
|
|
</div>
|
|
<Field>
|
|
<FieldLabel htmlFor="contact-3k2-email-acn">Email</FieldLabel>
|
|
<Input
|
|
id="contact-3k2-email-acn"
|
|
type="email"
|
|
placeholder="john@example.com"
|
|
required
|
|
/>
|
|
<FieldDescription>
|
|
We'll use this to contact you. We will not share your email
|
|
with anyone else.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="subject-exn">Subject</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a subject" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="general">General Inquiry</SelectItem>
|
|
<SelectItem value="support">Technical Support</SelectItem>
|
|
<SelectItem value="billing">Billing Question</SelectItem>
|
|
<SelectItem value="partnership">Partnership</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="contact-3k2-message-k3i">Message</FieldLabel>
|
|
<Textarea
|
|
id="contact-3k2-message-k3i"
|
|
placeholder="Tell us how we can help you..."
|
|
className="min-h-[100px]"
|
|
required
|
|
/>
|
|
<FieldDescription>
|
|
Please provide as much detail as possible to help us assist you
|
|
better.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Button type="submit">Send Message</Button>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function FeedbackForm() {
|
|
const [rating, setRating] = useState([5])
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Feedback Form</CardTitle>
|
|
<CardDescription>
|
|
Help us improve by sharing your experience
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="feedback-8m4-name-wql">
|
|
Name (Optional)
|
|
</FieldLabel>
|
|
<Input id="feedback-8m4-name-wql" placeholder="Your name" />
|
|
<FieldDescription>Your name is optional.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="feedback-8m4-email-kkm">
|
|
Email (Optional)
|
|
</FieldLabel>
|
|
<Input
|
|
id="feedback-8m4-email-kkm"
|
|
type="email"
|
|
placeholder="your@email.com"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="feedback-8m4-rating-gw9">
|
|
How would you rate your experience?
|
|
</FieldLabel>
|
|
<Slider
|
|
value={rating}
|
|
onValueChange={setRating}
|
|
max={10}
|
|
min={1}
|
|
step={1}
|
|
id="feedback-8m4-rating-gw9"
|
|
/>
|
|
<FieldDescription>
|
|
Poor (1) /{" "}
|
|
<span className="font-medium">Rating: {rating[0]}</span> /
|
|
Excellent (10)
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>What type of feedback is this?</FieldLabel>
|
|
<RadioGroup defaultValue="general">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="bug" id="feedback-8m4-bug" />
|
|
<FieldLabel
|
|
htmlFor="feedback-8m4-bug"
|
|
className="font-normal"
|
|
>
|
|
Bug Report
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="feature"
|
|
id="feedback-8m4-feature-c2h"
|
|
/>
|
|
<FieldLabel
|
|
htmlFor="feedback-8m4-feature-c2h"
|
|
className="font-normal"
|
|
>
|
|
Feature Request
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="general"
|
|
id="feedback-8m4-general-9wc"
|
|
/>
|
|
<FieldContent>
|
|
<FieldLabel
|
|
htmlFor="feedback-8m4-general-9wc"
|
|
className="font-normal"
|
|
>
|
|
General Feedback
|
|
</FieldLabel>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="complaint"
|
|
id="feedback-8m4-complaint-9lo"
|
|
/>
|
|
<FieldLabel
|
|
htmlFor="feedback-8m4-complaint-9lo"
|
|
className="font-normal"
|
|
>
|
|
Complaint
|
|
</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="feedback-8m4-message-ym5">
|
|
Your Feedback
|
|
</FieldLabel>
|
|
<Textarea
|
|
id="feedback-8m4-message-ym5"
|
|
placeholder="Please share your thoughts, suggestions, or report any issues..."
|
|
className="min-h-[120px]"
|
|
required
|
|
/>
|
|
<FieldDescription>
|
|
Please share your thoughts, suggestions, or report any issues...
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Button variant="outline">Cancel</Button>
|
|
<Button type="submit">Submit</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function JobApplicationForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Job Application</CardTitle>
|
|
<CardDescription>Apply for a position at our company</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="job-5p7-firstName-jel">
|
|
First Name
|
|
</FieldLabel>
|
|
<Input id="job-5p7-firstName-jel" placeholder="John" required />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="job-5p7-lastName-fl0">
|
|
Last Name
|
|
</FieldLabel>
|
|
<Input id="job-5p7-lastName-fl0" placeholder="Doe" required />
|
|
</Field>
|
|
</div>
|
|
<Field>
|
|
<FieldLabel htmlFor="job-5p7-email-6cz">Email</FieldLabel>
|
|
<Input
|
|
id="job-5p7-email-6cz"
|
|
type="email"
|
|
placeholder="john@example.com"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="job-5p7-phone-389">Phone Number</FieldLabel>
|
|
<Input
|
|
id="job-5p7-phone-389"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="position-k7f">Position</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select position" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="frontend">Frontend Developer</SelectItem>
|
|
<SelectItem value="backend">Backend Developer</SelectItem>
|
|
<SelectItem value="fullstack">
|
|
Full Stack Developer
|
|
</SelectItem>
|
|
<SelectItem value="designer">UI/UX Designer</SelectItem>
|
|
<SelectItem value="manager">Product Manager</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="experience-5ih">
|
|
Years of Experience
|
|
</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select experience level" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="0-1">0-1 years</SelectItem>
|
|
<SelectItem value="2-3">2-3 years</SelectItem>
|
|
<SelectItem value="4-6">4-6 years</SelectItem>
|
|
<SelectItem value="7-10">7-10 years</SelectItem>
|
|
<SelectItem value="10+">10+ years</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="job-5p7-portfolio-u1j">
|
|
Portfolio/LinkedIn URL
|
|
</FieldLabel>
|
|
<Input
|
|
id="job-5p7-portfolio-u1j"
|
|
type="url"
|
|
placeholder="https://..."
|
|
/>
|
|
<FieldDescription>
|
|
Optional: Share your portfolio or professional profile.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="job-5p7-coverLetter-h91">
|
|
Cover Letter
|
|
</FieldLabel>
|
|
<Textarea
|
|
id="job-5p7-coverLetter-h91"
|
|
placeholder="Tell us why you're interested in this position..."
|
|
className="min-h-[120px]"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="job-5p7-resume-ejb">Resume</FieldLabel>
|
|
<Input
|
|
id="job-5p7-resume-ejb"
|
|
type="file"
|
|
accept=".pdf,.doc,.docx"
|
|
/>
|
|
<FieldDescription>
|
|
Upload your resume in PDF, DOC, or DOCX format (max 5MB).
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="job-5p7-terms-slt" required />
|
|
<FieldLabel htmlFor="job-5p7-terms-slt">
|
|
I authorize the company to contact me.
|
|
</FieldLabel>
|
|
</Field>
|
|
|
|
<Button type="submit">Submit Application</Button>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function NewsletterForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Newsletter Signup</CardTitle>
|
|
<CardDescription>
|
|
Stay updated with our latest news and updates
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="newsletter-2q8-name-sig">Name</FieldLabel>
|
|
<Input
|
|
id="newsletter-2q8-name-sig"
|
|
placeholder="Your name"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="newsletter-2q8-email-wfn">Email</FieldLabel>
|
|
<Input
|
|
id="newsletter-2q8-email-wfn"
|
|
type="email"
|
|
placeholder="your@email.com"
|
|
required
|
|
/>
|
|
<FieldDescription>
|
|
We'll send our newsletter to this email address.
|
|
</FieldDescription>
|
|
</Field>
|
|
<FieldSet>
|
|
<FieldLegend>Interests (Select all that apply)</FieldLegend>
|
|
<FieldGroup data-slot="checkbox-group">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="newsletter-2q8-tech-b8o" />
|
|
<FieldLabel
|
|
htmlFor="newsletter-2q8-tech-b8o"
|
|
className="font-normal"
|
|
>
|
|
Technology News
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="newsletter-2q8-product-3rm" />
|
|
<FieldLabel
|
|
htmlFor="newsletter-2q8-product-3rm"
|
|
className="font-normal"
|
|
>
|
|
Product Updates
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="newsletter-2q8-tips-9bh" />
|
|
<FieldLabel
|
|
htmlFor="newsletter-2q8-tips-9bh"
|
|
className="font-normal"
|
|
>
|
|
Tips & Tutorials
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="newsletter-2q8-events-r4m" />
|
|
<FieldLabel
|
|
htmlFor="newsletter-2q8-events-r4m"
|
|
className="font-normal"
|
|
>
|
|
Events & Webinars
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="newsletter-2q8-privacy-26q" required />
|
|
<FieldLabel htmlFor="newsletter-2q8-privacy-26q">
|
|
I agree to receive marketing emails.
|
|
</FieldLabel>
|
|
</Field>
|
|
|
|
<Button type="submit">Subscribe to Newsletter</Button>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function PaymentForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Payment Information</CardTitle>
|
|
<CardDescription>
|
|
Enter your payment details to complete your purchase
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="payment-9n3-cardNumber-wre">
|
|
Card Number
|
|
</FieldLabel>
|
|
<Input
|
|
id="payment-9n3-cardNumber-wre"
|
|
placeholder="1234 5678 9012 3456"
|
|
maxLength={19}
|
|
/>
|
|
</Field>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="payment-9n3-expiry-9oa">
|
|
Expiry Date
|
|
</FieldLabel>
|
|
<Input
|
|
id="payment-9n3-expiry-9oa"
|
|
placeholder="MM/YY"
|
|
maxLength={5}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="payment-9n3-cvv">CVV</FieldLabel>
|
|
<Input id="payment-9n3-cvv" placeholder="123" maxLength={4} />
|
|
<FieldDescription>3 or 4 digit security code.</FieldDescription>
|
|
</Field>
|
|
</div>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="payment-9n3-cardName-tko">
|
|
Name on Card
|
|
</FieldLabel>
|
|
<Input id="payment-9n3-cardName-tko" placeholder="John Doe" />
|
|
</Field>
|
|
|
|
<Separator />
|
|
|
|
<FieldSet>
|
|
<FieldLegend>Billing Address</FieldLegend>
|
|
<FieldDescription>
|
|
Please enter your billing address.
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="payment-9n3-address-a7f">
|
|
Address
|
|
</FieldLabel>
|
|
<Input
|
|
id="payment-9n3-address-a7f"
|
|
placeholder="123 Main St"
|
|
/>
|
|
</Field>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="payment-9n3-city-sgj">City</FieldLabel>
|
|
<Input id="payment-9n3-city-sgj" placeholder="New York" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="payment-9n3-zip">ZIP Code</FieldLabel>
|
|
<Input id="payment-9n3-zip" placeholder="10001" />
|
|
</Field>
|
|
</div>
|
|
<Field>
|
|
<FieldLabel htmlFor="payment-9n3-country-7r4">
|
|
Country
|
|
</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select country" />
|
|
</SelectTrigger>
|
|
<SelectContent position="item-aligned">
|
|
<SelectItem value="us">United States</SelectItem>
|
|
<SelectItem value="ca">Canada</SelectItem>
|
|
<SelectItem value="uk">United Kingdom</SelectItem>
|
|
<SelectItem value="au">Australia</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
|
|
<Field className="justify-between">
|
|
<Button variant="outline">Cancel</Button>
|
|
<Button type="submit">Complete Payment</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormInputDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Input Fields</CardTitle>
|
|
<CardDescription>Different input field configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-1a2-basic-ian">Basic Input</FieldLabel>
|
|
<Input id="input-1a2-basic-ian" placeholder="Enter text" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-1a2-withDesc-k18">
|
|
Input with Description
|
|
</FieldLabel>
|
|
<Input
|
|
id="input-1a2-withDesc-k18"
|
|
placeholder="Enter your username"
|
|
/>
|
|
<FieldDescription>
|
|
Choose a unique username for your account.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-1a2-descFirst-omn">
|
|
Email Address
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
We'll never share your email with anyone.
|
|
</FieldDescription>
|
|
<Input
|
|
id="input-1a2-descFirst-omn"
|
|
type="email"
|
|
placeholder="email@example.com"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-1a2-required-hao">
|
|
Required Field <span className="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<Input
|
|
id="input-1a2-required-hao"
|
|
placeholder="This field is required"
|
|
required
|
|
/>
|
|
<FieldDescription>This field must be filled out.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-1a2-disabled-xb6">
|
|
Disabled Input
|
|
</FieldLabel>
|
|
<Input
|
|
id="input-1a2-disabled-xb6"
|
|
placeholder="Cannot edit"
|
|
disabled
|
|
/>
|
|
<FieldDescription>
|
|
This field is currently disabled.
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormTextareaDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Textarea Fields</CardTitle>
|
|
<CardDescription>
|
|
Different textarea field configurations
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-3b5-basic-cag">
|
|
Basic Textarea
|
|
</FieldLabel>
|
|
<Textarea
|
|
id="textarea-3b5-basic-cag"
|
|
placeholder="Enter your message"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-3b5-comments-16o">
|
|
Comments
|
|
</FieldLabel>
|
|
<Textarea
|
|
id="textarea-3b5-comments-16o"
|
|
placeholder="Share your thoughts..."
|
|
className="min-h-[100px]"
|
|
/>
|
|
<FieldDescription>Maximum 500 characters allowed.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-3b5-bio">Bio</FieldLabel>
|
|
<FieldDescription>
|
|
Tell us about yourself in a few sentences.
|
|
</FieldDescription>
|
|
<Textarea
|
|
id="textarea-3b5-bio"
|
|
placeholder="I am a..."
|
|
className="min-h-[120px]"
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormSelectDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Select Fields</CardTitle>
|
|
<CardDescription>Different select field configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="select-4c6-basic-ttc">Basic Select</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="select-4c6-basic-ttc">
|
|
<SelectValue placeholder="Choose an option" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="option1">Option 1</SelectItem>
|
|
<SelectItem value="option2">Option 2</SelectItem>
|
|
<SelectItem value="option3">Option 3</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="select-4c6-country-dc2">Country</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="select-4c6-country-dc2">
|
|
<SelectValue placeholder="Select your country" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="us">United States</SelectItem>
|
|
<SelectItem value="uk">United Kingdom</SelectItem>
|
|
<SelectItem value="ca">Canada</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<FieldDescription>
|
|
Select the country where you currently reside.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="select-4c6-timezone-es6">Timezone</FieldLabel>
|
|
<FieldDescription>
|
|
Choose your local timezone for accurate scheduling.
|
|
</FieldDescription>
|
|
<Select>
|
|
<SelectTrigger id="select-4c6-timezone-es6">
|
|
<SelectValue placeholder="Select timezone" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="utc">UTC</SelectItem>
|
|
<SelectItem value="est">Eastern Time</SelectItem>
|
|
<SelectItem value="pst">Pacific Time</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormRadioDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Radio Fields</CardTitle>
|
|
<CardDescription>Different radio field configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Subscription Plan</FieldLegend>
|
|
<RadioGroup defaultValue="free">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="free" id="free-ejb" />
|
|
<FieldLabel htmlFor="free-ejb" className="font-normal">
|
|
Free Plan
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="pro" id="pro-y3g" />
|
|
<FieldLabel htmlFor="pro-y3g" className="font-normal">
|
|
Pro Plan
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="enterprise" id="enterprise-l4t" />
|
|
<FieldLabel htmlFor="enterprise-l4t" className="font-normal">
|
|
Enterprise
|
|
</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Size</FieldLegend>
|
|
<FieldDescription>Select your preferred size.</FieldDescription>
|
|
<RadioGroup
|
|
defaultValue="medium"
|
|
className="grid w-fit grid-cols-2"
|
|
>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="small" id="size-small-1g9" />
|
|
<FieldLabel htmlFor="size-small-1g9" className="font-normal">
|
|
Small
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="medium" id="size-medium-okp" />
|
|
<FieldLabel htmlFor="size-medium-okp" className="font-normal">
|
|
Medium
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="large" id="size-large-tzy" />
|
|
<FieldLabel htmlFor="size-large-tzy" className="font-normal">
|
|
Large
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="xlarge" id="size-xlarge-2nn" />
|
|
<FieldLabel htmlFor="size-xlarge-2nn" className="font-normal">
|
|
X-Large
|
|
</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Notification Preferences</FieldLegend>
|
|
<FieldDescription>
|
|
Choose how you want to receive notifications.
|
|
</FieldDescription>
|
|
<RadioGroup defaultValue="email">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="email" id="notify-email-enh" />
|
|
<FieldLabel htmlFor="notify-email-enh" className="font-normal">
|
|
Email only
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="sms" id="notify-sms" />
|
|
<FieldLabel htmlFor="notify-sms" className="font-normal">
|
|
SMS only
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="both" id="notify-both-0ed" />
|
|
<FieldLabel htmlFor="notify-both-0ed" className="font-normal">
|
|
Both Email & SMS
|
|
</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Delivery Speed</FieldLegend>
|
|
<RadioGroup
|
|
defaultValue="standard"
|
|
className="flex flex-wrap gap-4"
|
|
>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="express" id="delivery-express-n5l" />
|
|
<FieldContent>
|
|
<FieldLabel
|
|
htmlFor="delivery-express-n5l"
|
|
className="font-normal"
|
|
>
|
|
Express (1-2 days)
|
|
</FieldLabel>
|
|
<FieldDescription>Get your order quickly.</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="standard" id="delivery-standard-14i" />
|
|
<FieldContent>
|
|
<FieldLabel
|
|
htmlFor="delivery-standard-14i"
|
|
className="font-normal"
|
|
>
|
|
Standard (3-5 days)
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Get your order in a few days.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="economy" id="delivery-economy-594" />
|
|
<FieldContent>
|
|
<FieldLabel
|
|
htmlFor="delivery-economy-594"
|
|
className="font-normal"
|
|
>
|
|
Economy (5-7 days)
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Get your order in a few days.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormCheckboxDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Checkbox Fields</CardTitle>
|
|
<CardDescription>
|
|
Different checkbox field configurations
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="terms-y7h" />
|
|
<FieldLabel htmlFor="terms-y7h" className="font-normal">
|
|
I agree to the terms and conditions
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="newsletter-sw8" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="newsletter-sw8">
|
|
Subscribe to newsletter
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive weekly updates about new features and promotions.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<FieldSet>
|
|
<FieldLegend>Preferences</FieldLegend>
|
|
<FieldDescription>
|
|
Select all that apply to customize your experience.
|
|
</FieldDescription>
|
|
<FieldGroup data-slot="checkbox-group">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="pref-dark-rfv" />
|
|
<FieldLabel htmlFor="pref-dark-rfv" className="font-normal">
|
|
Dark mode
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="pref-compact-ti2" />
|
|
<FieldLabel htmlFor="pref-compact-ti2" className="font-normal">
|
|
Compact view
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="pref-notifications-tut" />
|
|
<FieldLabel
|
|
htmlFor="pref-notifications-tut"
|
|
className="font-normal"
|
|
>
|
|
Enable notifications
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Skills</FieldLegend>
|
|
<FieldGroup className="flex-row flex-wrap gap-3 *:data-[slot=field]:w-fit">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="javascript-4ee" />
|
|
<FieldLabel htmlFor="javascript-4ee" className="font-normal">
|
|
JavaScript
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="typescript-cdv" />
|
|
<FieldLabel htmlFor="typescript-cdv" className="font-normal">
|
|
TypeScript
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="react-qhm" />
|
|
<FieldLabel htmlFor="react-qhm" className="font-normal">
|
|
React
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="nodejs-ug1" />
|
|
<FieldLabel htmlFor="nodejs-ug1" className="font-normal">
|
|
Node.js
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="python-azl" />
|
|
<FieldLabel htmlFor="python-azl" className="font-normal">
|
|
Python
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="database-br8" />
|
|
<FieldLabel htmlFor="database-br8" className="font-normal">
|
|
Database
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
<FieldDescription>
|
|
Select all technologies you are proficient with.
|
|
</FieldDescription>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormSliderDemo() {
|
|
const [volume, setVolume] = useState([50])
|
|
const [brightness, setBrightness] = useState([75])
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Slider Fields</CardTitle>
|
|
<CardDescription>Different slider field configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="volume-viy">Volume</FieldLabel>
|
|
<Slider
|
|
id="volume-viy"
|
|
value={volume}
|
|
onValueChange={setVolume}
|
|
max={100}
|
|
step={1}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="brightness-zke">Screen Brightness</FieldLabel>
|
|
<Slider
|
|
id="brightness-zke"
|
|
value={brightness}
|
|
onValueChange={setBrightness}
|
|
max={100}
|
|
step={5}
|
|
/>
|
|
<FieldDescription>
|
|
Current brightness: {brightness[0]}%
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="quality-ccr">Video Quality</FieldLabel>
|
|
<FieldDescription>
|
|
Higher quality uses more bandwidth.
|
|
</FieldDescription>
|
|
<Slider
|
|
id="quality-ccr"
|
|
defaultValue={[720]}
|
|
max={1080}
|
|
min={360}
|
|
step={360}
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormSwitchDemo() {
|
|
const [notifications, setNotifications] = useState(false)
|
|
const [marketing, setMarketing] = useState(true)
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Switch Fields</CardTitle>
|
|
<CardDescription>Different switch field configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="airplane-mode-c10">Airplane Mode</FieldLabel>
|
|
<FieldDescription>
|
|
Turn on airplane mode to disable all connections.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="airplane-mode-c10" />
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="notifications-rfq">
|
|
Push Notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive notifications about updates and new features.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch
|
|
id="notifications-rfq"
|
|
checked={notifications}
|
|
onCheckedChange={setNotifications}
|
|
/>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Switch
|
|
id="marketing-7o6"
|
|
checked={marketing}
|
|
onCheckedChange={setMarketing}
|
|
className="mt-0.5"
|
|
/>
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="marketing-7o6">Marketing Emails</FieldLabel>
|
|
<FieldDescription>
|
|
Receive emails about new products, features, and more.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Switch id="auto-save-eux" defaultChecked />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="auto-save-eux">Auto-save</FieldLabel>
|
|
<FieldDescription>
|
|
Automatically save your work every 5 minutes.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Privacy Settings</FieldLabel>
|
|
<FieldDescription>
|
|
Manage your privacy preferences.
|
|
</FieldDescription>
|
|
<Field orientation="horizontal">
|
|
<Switch id="profile-visible-zaq" defaultChecked />
|
|
<FieldContent>
|
|
<FieldLabel
|
|
htmlFor="profile-visible-zaq"
|
|
className="font-normal"
|
|
>
|
|
Make profile visible to others
|
|
</FieldLabel>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Switch id="show-email-x90" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="show-email-x90" className="font-normal">
|
|
Show email on profile
|
|
</FieldLabel>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Switch id="allow-indexing-d58" defaultChecked />
|
|
<FieldContent>
|
|
<FieldLabel
|
|
htmlFor="allow-indexing-d58"
|
|
className="font-normal"
|
|
>
|
|
Allow search engines to index profile
|
|
</FieldLabel>
|
|
</FieldContent>
|
|
</Field>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Switch id="disabled-switch-4eu" disabled />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="disabled-switch-4eu" className="opacity-50">
|
|
Disabled Feature
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
This feature is currently unavailable.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormToggleGroupDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Toggle Group Fields</CardTitle>
|
|
<CardDescription>Different toggle group configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel>View Mode</FieldLabel>
|
|
<ToggleGroup
|
|
type="single"
|
|
defaultValue="grid"
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
<ToggleGroupItem value="list" className="flex-1">
|
|
List
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="grid" className="flex-1">
|
|
Grid
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="cards" className="flex-1">
|
|
Cards
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Status Filter</FieldLabel>
|
|
<ToggleGroup type="single" variant="outline" className="flex-wrap">
|
|
<ToggleGroupItem value="active">Active</ToggleGroupItem>
|
|
<ToggleGroupItem value="pending">Pending</ToggleGroupItem>
|
|
<ToggleGroupItem value="completed">Completed</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<FieldDescription>Filter by multiple statuses.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Subscription Plan</FieldLabel>
|
|
<FieldDescription>
|
|
Select the subscription plan that you want to subscribe to.
|
|
</FieldDescription>
|
|
<ToggleGroup type="single" variant="outline" className="flex-wrap">
|
|
<ToggleGroupItem value="basic">Basic</ToggleGroupItem>
|
|
<ToggleGroupItem value="pro">Pro</ToggleGroupItem>
|
|
<ToggleGroupItem value="enterprise">Enterprise</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Disabled Toggle Group</FieldLabel>
|
|
<ToggleGroup type="single" disabled variant="outline">
|
|
<ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
|
|
<ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
|
|
<ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<FieldDescription>This toggle group is disabled.</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormInputTypesDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Text Input Types</CardTitle>
|
|
<CardDescription>Text-based HTML input variations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="text-input-qmg">Text</FieldLabel>
|
|
<Input id="text-input-qmg" type="text" placeholder="Enter text" />
|
|
<FieldDescription>Standard text input field.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="email-input-19f">Email</FieldLabel>
|
|
<Input
|
|
id="email-input-19f"
|
|
type="email"
|
|
placeholder="name@example.com"
|
|
/>
|
|
<FieldDescription>Email address with validation.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="password-input-63z">Password</FieldLabel>
|
|
<Input
|
|
id="password-input-63z"
|
|
type="password"
|
|
placeholder="Enter password"
|
|
/>
|
|
<FieldDescription>
|
|
Password field with hidden text.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="tel-input-iw1">Phone</FieldLabel>
|
|
<Input
|
|
id="tel-input-iw1"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
/>
|
|
<FieldDescription>Telephone number input.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="url-input-ku7">URL</FieldLabel>
|
|
<Input
|
|
id="url-input-ku7"
|
|
type="url"
|
|
placeholder="https://example.com"
|
|
/>
|
|
<FieldDescription>Website URL with validation.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="search-input-mhf">Search</FieldLabel>
|
|
<Input
|
|
id="search-input-mhf"
|
|
type="search"
|
|
placeholder="Search..."
|
|
/>
|
|
<FieldDescription>Search field with clear button.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="number-input-u7u">Number</FieldLabel>
|
|
<Input
|
|
id="number-input-u7u"
|
|
type="number"
|
|
placeholder="42"
|
|
min="0"
|
|
max="100"
|
|
step="1"
|
|
/>
|
|
<FieldDescription>Numeric input (0-100).</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormSpecialInputTypesDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Special Input Types</CardTitle>
|
|
<CardDescription>
|
|
Date, time, file and other special inputs
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="date-input-u7h">Date</FieldLabel>
|
|
<Input id="date-input-u7h" type="date" />
|
|
<FieldDescription>Native date picker.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="time-input-2oj">Time</FieldLabel>
|
|
<Input id="time-input-2oj" type="time" />
|
|
<FieldDescription>
|
|
Time selection (24-hour format).
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="datetime-input-3jq">Date & Time</FieldLabel>
|
|
<Input id="datetime-input-3jq" type="datetime-local" />
|
|
<FieldDescription>Combined date and time picker.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="month-input-667">Month</FieldLabel>
|
|
<Input id="month-input-667" type="month" />
|
|
<FieldDescription>Month and year selector.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="week-input-3bv">Week</FieldLabel>
|
|
<Input id="week-input-3bv" type="week" />
|
|
<FieldDescription>Week number selector.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="file-input-hmb">File Upload</FieldLabel>
|
|
<Input id="file-input-hmb" type="file" accept="image/*,.pdf" />
|
|
<FieldDescription>Upload images or PDF files.</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="files-input-p9u">Multiple Files</FieldLabel>
|
|
<Input
|
|
id="files-input-p9u"
|
|
type="file"
|
|
multiple
|
|
accept=".jpg,.jpeg,.png"
|
|
/>
|
|
<FieldDescription>Upload multiple image files.</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormOTPDemo() {
|
|
const [value, setValue] = useState("")
|
|
const [pinValue, setPinValue] = useState("")
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>OTP Input Fields</CardTitle>
|
|
<CardDescription>Different OTP input configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="basic-otp">Verification Code</FieldLabel>
|
|
<InputOTP id="basic-otp" maxLength={6}>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="otp-with-desc-5xp">Enter OTP</FieldLabel>
|
|
<InputOTP
|
|
id="otp-with-desc-5xp"
|
|
maxLength={6}
|
|
value={value}
|
|
onChange={setValue}
|
|
>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
<FieldDescription>
|
|
Enter the 6-digit code sent to your email.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="otp-separator-h39">
|
|
Two-Factor Authentication
|
|
</FieldLabel>
|
|
<InputOTP id="otp-separator-h39" maxLength={6}>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
<FieldDescription>
|
|
Enter the code from your authenticator app.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="pin-input-lqx">PIN Code</FieldLabel>
|
|
<InputOTP
|
|
id="pin-input-lqx"
|
|
maxLength={4}
|
|
pattern={REGEXP_ONLY_DIGITS}
|
|
value={pinValue}
|
|
onChange={setPinValue}
|
|
>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
<InputOTPSlot index={3} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
<FieldDescription>
|
|
Enter your 4-digit PIN (numbers only).
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="otp-multi-sep">License Key</FieldLabel>
|
|
<InputOTP id="otp-multi-sep" maxLength={8}>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={2} />
|
|
<InputOTPSlot index={3} />
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={6} />
|
|
<InputOTPSlot index={7} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
<FieldDescription>
|
|
Enter your 8-character license key.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="otp-custom-hip">Security Code</FieldLabel>
|
|
<FieldDescription>
|
|
Enter the security code to continue.
|
|
</FieldDescription>
|
|
<InputOTP id="otp-custom-hip" maxLength={6}>
|
|
<InputOTPGroup className="gap-2">
|
|
<InputOTPSlot index={0} className="rounded-md border" />
|
|
<InputOTPSlot index={1} className="rounded-md border" />
|
|
<InputOTPSlot index={2} className="rounded-md border" />
|
|
<InputOTPSlot index={3} className="rounded-md border" />
|
|
<InputOTPSlot index={4} className="rounded-md border" />
|
|
<InputOTPSlot index={5} className="rounded-md border" />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormDatePickerDemo() {
|
|
const [date, setDate] = useState<Date>()
|
|
const [birthDate, setBirthDate] = useState<Date>()
|
|
const [appointmentDate, setAppointmentDate] = useState<Date>()
|
|
const [dateRange, setDateRange] = useState<DateRange | undefined>()
|
|
const [vacationDates, setVacationDates] = useState<DateRange | undefined>({
|
|
from: new Date(),
|
|
to: addDays(new Date(), 7),
|
|
})
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Date Picker Fields</CardTitle>
|
|
<CardDescription>Different date picker configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field data-invalid={true}>
|
|
<FieldLabel htmlFor="basic-date-6st">Select Date</FieldLabel>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
id="basic-date-6st"
|
|
variant="outline"
|
|
aria-invalid={true}
|
|
className={cn(
|
|
"w-full justify-start text-left font-normal",
|
|
!date && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon />
|
|
{date ? format(date, "PPP") : <span>Pick a date</span>}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar mode="single" selected={date} onSelect={setDate} />
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="birth-date-0fq">Date of Birth</FieldLabel>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
id="birth-date-0fq"
|
|
variant="outline"
|
|
className={cn(
|
|
"w-full justify-start text-left font-normal",
|
|
!birthDate && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon />
|
|
{birthDate ? (
|
|
format(birthDate, "PPP")
|
|
) : (
|
|
<span>Select your birth date</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={birthDate}
|
|
onSelect={setBirthDate}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<FieldDescription>
|
|
We use this to calculate your age and provide age-appropriate
|
|
content.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="appointment-f44">Appointment Date</FieldLabel>
|
|
<FieldDescription>
|
|
Select a date for your appointment (weekdays only).
|
|
</FieldDescription>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
id="appointment-f44"
|
|
variant="outline"
|
|
className={cn(
|
|
"w-full justify-start text-left font-normal",
|
|
!appointmentDate && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon />
|
|
{appointmentDate ? (
|
|
format(appointmentDate, "PPP")
|
|
) : (
|
|
<span>Schedule appointment</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={appointmentDate}
|
|
onSelect={setAppointmentDate}
|
|
disabled={(date) =>
|
|
date < new Date() ||
|
|
date.getDay() === 0 ||
|
|
date.getDay() === 6
|
|
}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="date-range-7yr">Date Range</FieldLabel>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
id="date-range-7yr"
|
|
variant="outline"
|
|
className={cn(
|
|
"w-full justify-start text-left font-normal",
|
|
!dateRange && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon />
|
|
{dateRange?.from ? (
|
|
dateRange.to ? (
|
|
<>
|
|
{format(dateRange.from, "LLL dd, y")} -{" "}
|
|
{format(dateRange.to, "LLL dd, y")}
|
|
</>
|
|
) : (
|
|
format(dateRange.from, "LLL dd, y")
|
|
)
|
|
) : (
|
|
<span>Pick a date range</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="range"
|
|
defaultMonth={dateRange?.from}
|
|
selected={dateRange}
|
|
onSelect={setDateRange}
|
|
numberOfMonths={2}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<FieldDescription>
|
|
Select start and end dates for your report.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="vacation-w9w">Vacation Dates</FieldLabel>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
id="vacation-w9w"
|
|
variant="outline"
|
|
className={cn(
|
|
"w-full justify-start text-left font-normal",
|
|
!vacationDates && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon />
|
|
{vacationDates?.from ? (
|
|
vacationDates.to ? (
|
|
<>
|
|
{format(vacationDates.from, "LLL dd, y")} -{" "}
|
|
{format(vacationDates.to, "LLL dd, y")}
|
|
</>
|
|
) : (
|
|
format(vacationDates.from, "LLL dd, y")
|
|
)
|
|
) : (
|
|
<span>Select vacation dates</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<div className="flex flex-col">
|
|
<div className="flex gap-2 border-b p-3">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() =>
|
|
setVacationDates({
|
|
from: new Date(),
|
|
to: addDays(new Date(), 7),
|
|
})
|
|
}
|
|
>
|
|
Next 7 days
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() =>
|
|
setVacationDates({
|
|
from: new Date(),
|
|
to: addDays(new Date(), 14),
|
|
})
|
|
}
|
|
>
|
|
Next 2 weeks
|
|
</Button>
|
|
</div>
|
|
<Calendar
|
|
mode="range"
|
|
defaultMonth={vacationDates?.from}
|
|
selected={vacationDates}
|
|
onSelect={setVacationDates}
|
|
numberOfMonths={2}
|
|
/>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<FieldDescription>
|
|
Choose your vacation period. Quick presets available.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="disabled-date-1vz" className="opacity-50">
|
|
Event Date (Disabled)
|
|
</FieldLabel>
|
|
<Button
|
|
id="disabled-date-1vz"
|
|
variant="outline"
|
|
className="w-full justify-start text-left font-normal opacity-50"
|
|
disabled
|
|
>
|
|
<CalendarIcon />
|
|
<span>Date selection disabled</span>
|
|
</Button>
|
|
<FieldDescription>
|
|
This field is currently disabled.
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormFieldSetDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>FieldSet & FieldLegend</CardTitle>
|
|
<CardDescription>Different fieldset configurations</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Basic FieldSet</FieldLegend>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="basic-name-czt">Name</FieldLabel>
|
|
<Input id="basic-name-czt" placeholder="Enter your name" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="basic-email-32q">Email</FieldLabel>
|
|
<Input
|
|
id="basic-email-32q"
|
|
type="email"
|
|
placeholder="email@example.com"
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>FieldSet with Description</FieldLegend>
|
|
<FieldDescription>
|
|
This fieldset includes a description to provide context.
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="address-street-atj">
|
|
Street Address
|
|
</FieldLabel>
|
|
<Input id="address-street-atj" placeholder="123 Main St" />
|
|
</Field>
|
|
<FieldGroup className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="address-city-tpi">City</FieldLabel>
|
|
<Input id="address-city-tpi" placeholder="New York" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="address-zip">ZIP Code</FieldLabel>
|
|
<Input id="address-zip" placeholder="10001" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Communication Preferences</FieldLegend>
|
|
<FieldDescription>
|
|
Choose how you'd like us to keep in touch with you.
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend className="text-sm">
|
|
Preferred Contact Method
|
|
</FieldLegend>
|
|
<FieldDescription>
|
|
Choose how you'd like us to keep in touch with you.
|
|
</FieldDescription>
|
|
<RadioGroup defaultValue="email">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="email" id="contact-email-hxb" />
|
|
<FieldLabel
|
|
htmlFor="contact-email-hxb"
|
|
className="font-normal"
|
|
>
|
|
Email
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="phone" id="contact-phone-7id" />
|
|
<FieldLabel
|
|
htmlFor="contact-phone-7id"
|
|
className="font-normal"
|
|
>
|
|
Phone
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="sms" id="contact-sms" />
|
|
<FieldLabel htmlFor="contact-sms" className="font-normal">
|
|
SMS
|
|
</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend className="text-sm">
|
|
Notification Types
|
|
</FieldLegend>
|
|
<FieldDescription>
|
|
Choose which notifications you'd like to receive.
|
|
</FieldDescription>
|
|
<FieldGroup className="gap-3">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="updates-2sv" defaultChecked />
|
|
<FieldLabel htmlFor="updates-2sv" className="font-normal">
|
|
Product updates
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="newsletters-ejn" />
|
|
<FieldLabel
|
|
htmlFor="newsletters-ejn"
|
|
className="font-normal"
|
|
>
|
|
Newsletters
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="promotions-9xv" />
|
|
<FieldLabel
|
|
htmlFor="promotions-9xv"
|
|
className="font-normal"
|
|
>
|
|
Promotional offers
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Account Settings</FieldLegend>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="two-factor-kei">
|
|
Two-Factor Authentication
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Add an extra layer of security to your account.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="two-factor-kei" />
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="public-profile-bbt">
|
|
Public Profile
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Make your profile visible to other users.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="public-profile-bbt" defaultChecked />
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="activity-status-2la">
|
|
Show Activity Status
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Let others see when you're online.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="activity-status-2la" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
|
|
<FieldSet>
|
|
<FieldLegend>Emergency Contact</FieldLegend>
|
|
<FieldDescription>
|
|
Provide emergency contact information for safety purposes.
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="emergency-name-id4">
|
|
Contact Name
|
|
</FieldLabel>
|
|
<Input id="emergency-name-id4" placeholder="Jane Doe" />
|
|
<FieldDescription>
|
|
Full name of your emergency contact.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="emergency-relationship-9ja">
|
|
Relationship
|
|
</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="emergency-relationship-9ja">
|
|
<SelectValue placeholder="Select relationship" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="spouse">Spouse</SelectItem>
|
|
<SelectItem value="parent">Parent</SelectItem>
|
|
<SelectItem value="sibling">Sibling</SelectItem>
|
|
<SelectItem value="friend">Friend</SelectItem>
|
|
<SelectItem value="other">Other</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="emergency-phone-3de">
|
|
Phone Number
|
|
</FieldLabel>
|
|
<Input
|
|
id="emergency-phone-3de"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
/>
|
|
<FieldDescription>
|
|
Best number to reach your emergency contact.
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Additional Information</FieldLegend>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="comments-sxl">Comments</FieldLabel>
|
|
<Textarea
|
|
id="comments-sxl"
|
|
placeholder="Any additional information..."
|
|
className="min-h-[100px]"
|
|
/>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="agree-terms-04d" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="agree-terms-04d" className="font-normal">
|
|
I agree to the terms and conditions
|
|
</FieldLabel>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormFieldSeparatorDemo() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Field Separator</CardTitle>
|
|
<CardDescription>
|
|
Different ways to use the FieldSeparator component
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="section1-input-ieg">Section 1</FieldLabel>
|
|
<Input id="section1-input-ieg" placeholder="First section input" />
|
|
<FieldDescription>
|
|
This is the first section of the form.
|
|
</FieldDescription>
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field>
|
|
<FieldLabel htmlFor="section2-input-mh9">Section 2</FieldLabel>
|
|
<Input id="section2-input-mh9" placeholder="Second section input" />
|
|
<FieldDescription>
|
|
A simple separator line appears above this section.
|
|
</FieldDescription>
|
|
</Field>
|
|
<FieldSeparator>Or continue with</FieldSeparator>
|
|
<Field>
|
|
<Button variant="outline" className="w-full">
|
|
Alternative Option 1
|
|
</Button>
|
|
<Button variant="outline" className="w-full">
|
|
Alternative Option 2
|
|
</Button>
|
|
</Field>
|
|
<FieldSeparator>Additional Options</FieldSeparator>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="option1-ntl" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="option1-ntl" className="font-normal">
|
|
Enable additional features
|
|
</FieldLabel>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="option2-n0m" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="option2-n0m" className="font-normal">
|
|
Subscribe to updates
|
|
</FieldLabel>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldGroup>
|
|
<FieldSeparator />
|
|
<Field>
|
|
<FieldLabel htmlFor="final-section-mk8">Final Section</FieldLabel>
|
|
<Textarea
|
|
id="final-section-mk8"
|
|
placeholder="Any additional comments..."
|
|
className="min-h-[80px]"
|
|
/>
|
|
</Field>
|
|
<FieldSeparator>Or choose a different path</FieldSeparator>
|
|
<RadioGroup defaultValue="option1">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="option1" id="path1-pgt" />
|
|
<FieldLabel htmlFor="path1-pgt" className="font-normal">
|
|
Option Path 1
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="option2" id="path2-7pd" />
|
|
<FieldLabel htmlFor="path2-7pd" className="font-normal">
|
|
Option Path 2
|
|
</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
<FieldSeparator>Account Settings</FieldSeparator>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<Switch id="separator-7e9-notifications-5r4" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="separator-7e9-notifications-5r4">
|
|
Enable Notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive updates about your account activity.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Switch id="separator-7e9-privacy-81v" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="separator-7e9-privacy-81v">
|
|
Make Profile Public
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Allow others to view your profile information.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldGroup>
|
|
<Field>
|
|
<Button type="submit" className="w-full">
|
|
Submit Form
|
|
</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormFieldGroupOutlineDemo() {
|
|
return (
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Notification Settings</FieldLegend>
|
|
<FieldDescription>
|
|
Configure how and when you receive notifications
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="outline-demo-8h3-email-notif-vk0">
|
|
Email Notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive updates via email about your account activity
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="outline-demo-8h3-email-notif-vk0" defaultChecked />
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="outline-demo-8h3-push-notif-5m7">
|
|
Push Notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Get instant notifications on your device
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="outline-demo-8h3-push-notif-5m7" defaultChecked />
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<Switch id="outline-demo-8h3-sms-notif-ew4" />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="outline-demo-8h3-sms-notif-ew4">
|
|
SMS Notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive text messages for important updates
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<Switch id="outline-demo-8h3-weekly-digest-xor" defaultChecked />
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="outline-demo-8h3-weekly-digest-xor">
|
|
Weekly Digest
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Get a summary of your activity every week
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSet>
|
|
<FieldLegend>Privacy Settings</FieldLegend>
|
|
<FieldDescription>
|
|
Control your privacy and data sharing preferences
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="contact-3k2-firstName-q1r">
|
|
First Name
|
|
</FieldLabel>
|
|
<Input id="contact-3k2-firstName-q1r" placeholder="John" required />
|
|
</Field>
|
|
<FieldSet>
|
|
<FieldLegend variant="label">
|
|
Show these items on the desktop:
|
|
</FieldLegend>
|
|
<FieldDescription>
|
|
Select the items you want to show on the desktop.
|
|
</FieldDescription>
|
|
<FieldGroup className="gap-3">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-hard-disks-ljj" />
|
|
<FieldLabel
|
|
htmlFor="finder-pref-9k2-hard-disks-ljj"
|
|
className="font-normal"
|
|
>
|
|
Hard disks
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-external-disks-1yg" />
|
|
<FieldLabel
|
|
htmlFor="finder-pref-9k2-external-disks-1yg"
|
|
className="font-normal"
|
|
>
|
|
External disks
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
|
|
<FieldLabel
|
|
htmlFor="finder-pref-9k2-cds-dvds-fzt"
|
|
className="font-normal"
|
|
>
|
|
CDs, DVDs, and iPods
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="finder-pref-9k2-connected-servers-6l2" />
|
|
<FieldLabel
|
|
htmlFor="finder-pref-9k2-connected-servers-6l2"
|
|
className="font-normal"
|
|
>
|
|
Connected servers
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="outline-demo-8h3-profile-public-agy">
|
|
Public Profile
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Make your profile visible to everyone
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="outline-demo-8h3-profile-public-agy" />
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="outline-demo-8h3-share-data-088">
|
|
Share Usage Data
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Help improve our services by sharing anonymous usage data. This
|
|
data helps us understand how our product is used and how we can
|
|
improve it.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="outline-demo-8h3-share-data-088" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
)
|
|
}
|
|
|
|
export function ProfileSettingsForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Profile Settings</CardTitle>
|
|
<CardDescription>
|
|
Update your profile information and preferences
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel>Profile Photo</FieldLabel>
|
|
<div className="flex items-center space-x-4">
|
|
<Avatar className="size-12">
|
|
<AvatarImage src="/abstract-profile.png" />
|
|
<AvatarFallback>JD</AvatarFallback>
|
|
</Avatar>
|
|
<Button variant="outline" type="button">
|
|
Change Photo
|
|
</Button>
|
|
</div>
|
|
</Field>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="profileFirstName-h2r">
|
|
First Name
|
|
</FieldLabel>
|
|
<Input id="profileFirstName-h2r" defaultValue="John" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="profileLastName-cal">Last Name</FieldLabel>
|
|
<Input id="profileLastName-cal" defaultValue="Doe" />
|
|
</Field>
|
|
</div>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="profileEmail-e4m">Email</FieldLabel>
|
|
<Input
|
|
id="profileEmail-e4m"
|
|
type="email"
|
|
defaultValue="john@example.com"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="phone-olk">Phone Number</FieldLabel>
|
|
<Input
|
|
id="phone-olk"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="bio-jlq">Bio</FieldLabel>
|
|
<Textarea
|
|
id="bio-jlq"
|
|
placeholder="Tell us about yourself..."
|
|
className="min-h-[80px]"
|
|
/>
|
|
</Field>
|
|
|
|
<FieldSet>
|
|
<FieldLegend>Notification Preferences</FieldLegend>
|
|
<FieldDescription>
|
|
Manage your notification preferences.
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="emailNotifications-xfj">
|
|
Email notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive emails about new products, features, and more. If
|
|
you don't want to receive these emails, you can turn
|
|
them off.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch
|
|
id="emailNotifications-xfj"
|
|
defaultChecked
|
|
className="ml-auto"
|
|
/>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldLabel htmlFor="pushNotifications-ofh">
|
|
Push notifications
|
|
</FieldLabel>
|
|
<Switch id="pushNotifications-ofh" />
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldLabel htmlFor="marketingEmails-8hc">
|
|
Marketing emails
|
|
</FieldLabel>
|
|
<Switch
|
|
id="marketingEmails-8hc"
|
|
defaultChecked
|
|
className="ml-auto"
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<Field orientation="horizontal" className="justify-end">
|
|
<Button type="button" variant="outline">
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit">Save Changes</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function SurveyForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Customer Survey</CardTitle>
|
|
<CardDescription>
|
|
Help us understand your needs better (5 minutes)
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="surveyName-eqj">Name (Optional)</FieldLabel>
|
|
<Input id="surveyName-eqj" placeholder="Your name" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="ageGroup-302">Age Group</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select age group" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="18-24">18-24</SelectItem>
|
|
<SelectItem value="25-34">25-34</SelectItem>
|
|
<SelectItem value="35-44">35-44</SelectItem>
|
|
<SelectItem value="45-54">45-54</SelectItem>
|
|
<SelectItem value="55+">55+</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>How often do you use our product?</FieldLabel>
|
|
<RadioGroup>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="daily" id="daily-lrv" />
|
|
<FieldLabel htmlFor="daily-lrv">Daily</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="weekly" id="weekly-mga" />
|
|
<FieldLabel htmlFor="weekly-mga">Weekly</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="monthly" id="monthly-7gl" />
|
|
<FieldLabel htmlFor="monthly-7gl">Monthly</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="rarely" id="rarely-hlw" />
|
|
<FieldLabel htmlFor="rarely-hlw">Rarely</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>
|
|
Which features do you use most? (Select all that apply)
|
|
</FieldLabel>
|
|
<div className="grid w-full grid-cols-2 gap-2">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="dashboard-epk" />
|
|
<FieldLabel htmlFor="dashboar d-epk" className="text-sm">
|
|
Dashboard
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="reports-jkm" />
|
|
<FieldLabel htmlFor="reports-jkm" className="text-sm">
|
|
Reports
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="analytics-kwm" />
|
|
<FieldLabel htmlFor="analytics-kwm" className="text-sm">
|
|
Analytics
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="integrations-euz" />
|
|
<FieldLabel htmlFor="integrations-euz" className="text-sm">
|
|
Integrations
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="api-e2h" />
|
|
<FieldLabel htmlFor="api-e2h" className="text-sm">
|
|
API Access
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="support-qq9" />
|
|
<FieldLabel htmlFor="support-qq9" className="text-sm">
|
|
Support
|
|
</FieldLabel>
|
|
</Field>
|
|
</div>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>How satisfied are you with our product?</FieldLabel>
|
|
<RadioGroup>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="very-satisfied"
|
|
id="very-satisfied-ok5"
|
|
/>
|
|
<FieldLabel htmlFor="very-satisfied-ok5">
|
|
Very Satisfied
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="satisfied" id="satisfied-hn4" />
|
|
<FieldLabel htmlFor="satisfied-hn4">Satisfied</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="neutral" id="neutral-6az" />
|
|
<FieldLabel htmlFor="neutral-6az">Neutral</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="dissatisfied" id="dissatisfied-sy9" />
|
|
<FieldLabel htmlFor="dissatisfied-sy9">
|
|
Dissatisfied
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem
|
|
value="very-dissatisfied"
|
|
id="very-dissatisfied-xs2"
|
|
/>
|
|
<FieldLabel htmlFor="very-dissatisfied-xs2">
|
|
Very Dissatisfied
|
|
</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="improvements-u5u">
|
|
What improvements would you like to see?
|
|
</FieldLabel>
|
|
<Textarea
|
|
id="improvements-u5u"
|
|
placeholder="Share your suggestions for improvements..."
|
|
className="min-h-[80px]"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="recommend-aym">
|
|
Would you recommend our product to others?
|
|
</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select recommendation level" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="definitely">Definitely</SelectItem>
|
|
<SelectItem value="probably">Probably</SelectItem>
|
|
<SelectItem value="maybe">Maybe</SelectItem>
|
|
<SelectItem value="probably-not">Probably Not</SelectItem>
|
|
<SelectItem value="definitely-not">Definitely Not</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
|
|
<Button type="submit" className="w-full">
|
|
Submit
|
|
</Button>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function ComplexFormDemo() {
|
|
return (
|
|
<Card className="w-full max-w-3xl">
|
|
<CardHeader>
|
|
<CardTitle>Job Application Form</CardTitle>
|
|
<CardDescription>
|
|
Complete all sections to submit your application
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Personal Information</FieldLegend>
|
|
<FieldDescription>
|
|
Your basic contact information.
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="complex-6d8-firstName-dsv">
|
|
First Name
|
|
</FieldLabel>
|
|
<Input
|
|
id="complex-6d8-firstName-dsv"
|
|
placeholder="John"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="complex-6d8-lastName-i08">
|
|
Last Name
|
|
</FieldLabel>
|
|
<Input
|
|
id="complex-6d8-lastName-i08"
|
|
placeholder="Doe"
|
|
required
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="complex-6d8-email-yq8">
|
|
Email Address
|
|
</FieldLabel>
|
|
<Input
|
|
id="complex-6d8-email-yq8"
|
|
type="email"
|
|
placeholder="john.doe@example.com"
|
|
required
|
|
/>
|
|
<FieldDescription>
|
|
We'll use this for all communications.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="complex-6d8-phone-a7k">
|
|
Phone Number
|
|
</FieldLabel>
|
|
<Input
|
|
id="complex-6d8-phone-a7k"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Professional Background</FieldLegend>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="position-k7f">
|
|
Position Applying For
|
|
</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="position-k7f">
|
|
<SelectValue placeholder="Select a position" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="frontend">
|
|
Frontend Developer
|
|
</SelectItem>
|
|
<SelectItem value="backend">Backend Developer</SelectItem>
|
|
<SelectItem value="fullstack">
|
|
Full Stack Developer
|
|
</SelectItem>
|
|
<SelectItem value="designer">UI/UX Designer</SelectItem>
|
|
<SelectItem value="pm">Product Manager</SelectItem>
|
|
<SelectItem value="devops">DevOps Engineer</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="experience-5ih">
|
|
Years of Experience
|
|
</FieldLabel>
|
|
<Slider id="experience-5ih" max={20} min={0} step={1} />
|
|
<FieldDescription>Years of experience</FieldDescription>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel>Employment Type Preference</FieldLabel>
|
|
<ToggleGroup
|
|
type="single"
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
<ToggleGroupItem value="remote" className="flex-1">
|
|
Remote
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="office" className="flex-1">
|
|
Office
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="hybrid" className="flex-1">
|
|
Hybrid
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
|
|
<FieldSeparator />
|
|
|
|
<FieldSet>
|
|
<FieldLegend>Additional Information</FieldLegend>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="portfolio-6km">Portfolio URL</FieldLabel>
|
|
<Input
|
|
id="portfolio-6km"
|
|
type="url"
|
|
placeholder="https://yourportfolio.com"
|
|
/>
|
|
<FieldDescription>
|
|
Optional: Share your portfolio or GitHub profile
|
|
</FieldDescription>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="coverLetter-6re">
|
|
Cover Letter
|
|
</FieldLabel>
|
|
<Textarea
|
|
id="coverLetter-6re"
|
|
placeholder="Tell us why you're a great fit for this position..."
|
|
className="min-h-[120px]"
|
|
/>
|
|
<FieldDescription>
|
|
Briefly describe your interest and qualifications (500 words
|
|
max)
|
|
</FieldDescription>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="resume-yyr">Upload Resume</FieldLabel>
|
|
<Input id="resume-yyr" type="file" accept=".pdf,.doc,.docx" />
|
|
<FieldDescription>
|
|
PDF or Word document (max 5MB)
|
|
</FieldDescription>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="references-fcs">
|
|
References Available
|
|
</FieldLabel>
|
|
<RadioGroup defaultValue="yes">
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="yes" id="ref-yes" />
|
|
<FieldLabel htmlFor="ref-yes" className="font-normal">
|
|
Yes, upon request
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<RadioGroupItem value="no" id="ref-no-pqi" />
|
|
<FieldLabel htmlFor="ref-no-pqi" className="font-normal">
|
|
No
|
|
</FieldLabel>
|
|
</Field>
|
|
</RadioGroup>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
|
|
<FieldSeparator />
|
|
|
|
<FieldSet>
|
|
<FieldLegend>Verification</FieldLegend>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="verification-pj8">
|
|
Enter Verification Code
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Enter the 6-digit code sent to your email
|
|
</FieldDescription>
|
|
<InputOTP id="verification-pj8" maxLength={6}>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</Field>
|
|
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="notifications-rfq">
|
|
Email Notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive updates about your application status
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="notifications-rfq" defaultChecked />
|
|
</Field>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="terms-y7h" required />
|
|
<FieldLabel htmlFor="terms-y7h" className="font-normal">
|
|
I agree to the terms and conditions and privacy policy
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="accurate-vte" required />
|
|
<FieldLabel htmlFor="accurate-vte" className="font-normal">
|
|
I confirm that all information provided is accurate
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<Field orientation="horizontal">
|
|
<Button variant="outline">Save Draft</Button>
|
|
<Button type="submit">Submit Application</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function ComplexFormInvalidDemo() {
|
|
const [startDate, setStartDate] = useState<Date>()
|
|
const [experience, setExperience] = useState([3])
|
|
const [workType, setWorkType] = useState("hybrid")
|
|
|
|
return (
|
|
<Card className="w-full max-w-3xl">
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Personal Information</FieldLegend>
|
|
<FieldDescription>
|
|
Your basic contact information.
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="firstName-invalid-ygm">
|
|
First Name
|
|
</FieldLabel>
|
|
<Input
|
|
id="firstName-invalid-ygm"
|
|
placeholder="John"
|
|
required
|
|
aria-invalid
|
|
/>
|
|
</Field>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="lastName-invalid-qlq">
|
|
Last Name
|
|
</FieldLabel>
|
|
<Input
|
|
id="lastName-invalid-qlq"
|
|
placeholder="Doe"
|
|
required
|
|
aria-invalid
|
|
/>
|
|
</Field>
|
|
</div>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="email-invalid-8tl">
|
|
Email Address
|
|
</FieldLabel>
|
|
<Input
|
|
id="email-invalid-8tl"
|
|
type="email"
|
|
placeholder="john.doe@example.com"
|
|
required
|
|
aria-invalid
|
|
/>
|
|
<FieldDescription>
|
|
We'll use this for all communications.
|
|
</FieldDescription>
|
|
</Field>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="phone-invalid-2r4">
|
|
Phone Number
|
|
</FieldLabel>
|
|
<Input
|
|
id="phone-invalid-2r4"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
aria-invalid
|
|
/>
|
|
</Field>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="birthdate-invalid-49m">
|
|
Date of Birth
|
|
</FieldLabel>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
id="birthdate-invalid-49m"
|
|
variant="outline"
|
|
className={cn(
|
|
"w-full justify-start text-left font-normal",
|
|
!startDate && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon />
|
|
{startDate ? (
|
|
format(startDate, "PPP")
|
|
) : (
|
|
<span>Pick a date</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={startDate}
|
|
onSelect={setStartDate}
|
|
aria-invalid
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Field>
|
|
</div>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="coverLetter-invalid-6n9">
|
|
Cover Letter
|
|
</FieldLabel>
|
|
<Textarea
|
|
id="coverLetter-invalid-6n9"
|
|
placeholder="Tell us why you're a great fit for this position..."
|
|
className="min-h-[120px]"
|
|
aria-invalid
|
|
/>
|
|
<FieldDescription>
|
|
Briefly describe your interest and qualifications (500 words
|
|
max)
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="resume-invalid-b6z">
|
|
Upload Resume
|
|
</FieldLabel>
|
|
<Input
|
|
id="resume-invalid-b6z"
|
|
type="file"
|
|
accept=".pdf,.doc,.docx"
|
|
aria-invalid
|
|
/>
|
|
<FieldDescription>
|
|
PDF or Word document (max 5MB)
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Professional Background</FieldLegend>
|
|
<FieldGroup>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="position-invalid-1fv">
|
|
Position Applying For
|
|
</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="position-invalid-1fv" aria-invalid>
|
|
<SelectValue placeholder="Select a position" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="frontend">
|
|
Frontend Developer
|
|
</SelectItem>
|
|
<SelectItem value="backend">Backend Developer</SelectItem>
|
|
<SelectItem value="fullstack">
|
|
Full Stack Developer
|
|
</SelectItem>
|
|
<SelectItem value="designer">UI/UX Designer</SelectItem>
|
|
<SelectItem value="pm">Product Manager</SelectItem>
|
|
<SelectItem value="devops">DevOps Engineer</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="experience-invalid-xri">
|
|
Years of Experience
|
|
</FieldLabel>
|
|
<Slider
|
|
id="experience-invalid-xri"
|
|
value={experience}
|
|
onValueChange={setExperience}
|
|
max={20}
|
|
min={0}
|
|
step={1}
|
|
/>
|
|
<FieldDescription>
|
|
{experience[0]} {experience[0] === 1 ? "year" : "years"} of
|
|
experience
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field data-invalid>
|
|
<FieldLabel>Employment Type Preference</FieldLabel>
|
|
<ToggleGroup
|
|
type="single"
|
|
value={workType}
|
|
onValueChange={setWorkType}
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
<ToggleGroupItem value="remote" className="flex-1">
|
|
Remote
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="office" className="flex-1">
|
|
Office
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="hybrid" className="flex-1">
|
|
Hybrid
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Field>
|
|
<FieldSet>
|
|
<FieldLegend>Technical Skills</FieldLegend>
|
|
<FieldDescription>Select all that apply</FieldDescription>
|
|
<FieldGroup className="grid grid-cols-3 gap-3">
|
|
<Field data-invalid orientation="horizontal">
|
|
<Checkbox id="skill-ts-invalid-khi" aria-invalid />
|
|
<FieldLabel
|
|
htmlFor="skill-ts-invalid-khi"
|
|
className="font-normal"
|
|
>
|
|
TypeScript
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field data-invalid orientation="horizontal">
|
|
<Checkbox id="skill-react-invalid-oxj" aria-invalid />
|
|
<FieldLabel
|
|
htmlFor="skill-react-invalid-oxj"
|
|
className="font-normal"
|
|
>
|
|
React
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field data-invalid orientation="horizontal">
|
|
<Checkbox id="skill-node-invalid-y18" aria-invalid />
|
|
<FieldLabel
|
|
htmlFor="skill-node-invalid-y18"
|
|
className="font-normal"
|
|
>
|
|
Node.js
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field data-invalid orientation="horizontal">
|
|
<Checkbox id="skill-python-invalid-3jp" aria-invalid />
|
|
<FieldLabel
|
|
htmlFor="skill-python-invalid-3jp"
|
|
className="font-normal"
|
|
>
|
|
Python
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field data-invalid orientation="horizontal">
|
|
<Checkbox id="skill-docker-invalid-5b0" aria-invalid />
|
|
<FieldLabel
|
|
htmlFor="skill-docker-invalid-5b0"
|
|
className="font-normal"
|
|
>
|
|
Docker
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Verification</FieldLegend>
|
|
<FieldGroup>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="verification-invalid-zyx">
|
|
Enter Verification Code
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Enter the 6-digit code sent to your email
|
|
</FieldDescription>
|
|
<InputOTP id="verification-invalid-zyx" maxLength={6}>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} aria-invalid />
|
|
<InputOTPSlot index={1} aria-invalid />
|
|
<InputOTPSlot index={2} aria-invalid />
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={3} aria-invalid />
|
|
<InputOTPSlot index={4} aria-invalid />
|
|
<InputOTPSlot index={5} aria-invalid />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</Field>
|
|
<Field data-invalid orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="notifications-invalid-73q">
|
|
Email Notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive updates about your application status
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch
|
|
id="notifications-invalid-73q"
|
|
defaultChecked
|
|
className="ml-auto"
|
|
aria-invalid
|
|
/>
|
|
</Field>
|
|
<FieldGroup>
|
|
<Field data-invalid orientation="horizontal">
|
|
<Checkbox id="terms-invalid-0x4" required />
|
|
<FieldLabel
|
|
htmlFor="terms-invalid-0x4"
|
|
className="font-normal"
|
|
>
|
|
I agree to the terms and conditions and privacy policy
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field data-invalid orientation="horizontal">
|
|
<Checkbox id="accurate-invalid-z0j" required />
|
|
<FieldLabel
|
|
htmlFor="accurate-invalid-z0j"
|
|
className="font-normal"
|
|
>
|
|
I confirm that all information provided is accurate
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<Field orientation="horizontal">
|
|
<Button variant="outline">Save Draft</Button>
|
|
<Button type="submit">Submit Application</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FormOrientationDemo() {
|
|
return (
|
|
<Card className="w-full max-w-2xl">
|
|
<CardHeader>
|
|
<CardTitle>Field Orientation Examples</CardTitle>
|
|
<CardDescription>
|
|
Demonstrating vertical, horizontal, and responsive orientations
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Vertical Orientation (Default)</FieldLegend>
|
|
<FieldDescription>
|
|
Label appears above the input - best for mobile and narrow layouts
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="vertical-name">Full Name</FieldLabel>
|
|
<Input id="vertical-name" placeholder="Enter your name" />
|
|
<FieldDescription>
|
|
This field uses vertical orientation
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="vertical-select">Country</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="vertical-select">
|
|
<SelectValue placeholder="Select country" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="us">United States</SelectItem>
|
|
<SelectItem value="uk">United Kingdom</SelectItem>
|
|
<SelectItem value="ca">Canada</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="vertical-notifications">
|
|
Email Notifications
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Receive product updates and news
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="vertical-notifications" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
|
|
<FieldSeparator />
|
|
|
|
<FieldSet>
|
|
<FieldLegend>Horizontal Orientation</FieldLegend>
|
|
<FieldDescription>
|
|
Label appears to the left of the input - great for desktop forms
|
|
with short labels
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="horizontal-name">Name</FieldLabel>
|
|
<FieldDescription>Your display name</FieldDescription>
|
|
</FieldContent>
|
|
<Input id="horizontal-name" placeholder="Enter name" />
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="horizontal-theme">Theme</FieldLabel>
|
|
<FieldDescription>
|
|
Choose your preferred theme
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Select>
|
|
<SelectTrigger id="horizontal-theme">
|
|
<SelectValue placeholder="Select theme" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="light">Light</SelectItem>
|
|
<SelectItem value="dark">Dark</SelectItem>
|
|
<SelectItem value="system">System</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="horizontal-volume">Volume</FieldLabel>
|
|
<FieldDescription>Adjust audio level</FieldDescription>
|
|
</FieldContent>
|
|
<Slider id="horizontal-volume" defaultValue={[50]} max={100} />
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="horizontal-auto-save">
|
|
Auto Save
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Automatically save changes
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="horizontal-auto-save" defaultChecked />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
|
|
<FieldSeparator />
|
|
|
|
<FieldSet>
|
|
<FieldLegend>Responsive Orientation</FieldLegend>
|
|
<FieldDescription>
|
|
Vertical on mobile, horizontal on desktop - the best of both
|
|
worlds
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field orientation="responsive">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="responsive-username">
|
|
Username
|
|
</FieldLabel>
|
|
<FieldDescription>Choose a unique username</FieldDescription>
|
|
</FieldContent>
|
|
<Input id="responsive-username" placeholder="username" />
|
|
</Field>
|
|
<Field orientation="responsive">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="responsive-language">
|
|
Language
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Select your preferred language
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Select>
|
|
<SelectTrigger id="responsive-language">
|
|
<SelectValue placeholder="Select language" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="en">English</SelectItem>
|
|
<SelectItem value="es">Spanish</SelectItem>
|
|
<SelectItem value="fr">French</SelectItem>
|
|
<SelectItem value="de">German</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field orientation="responsive">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="responsive-brightness">
|
|
Brightness
|
|
</FieldLabel>
|
|
<FieldDescription>Adjust screen brightness</FieldDescription>
|
|
</FieldContent>
|
|
<Slider
|
|
id="responsive-brightness"
|
|
defaultValue={[75]}
|
|
max={100}
|
|
/>
|
|
</Field>
|
|
<Field orientation="responsive">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="responsive-location">
|
|
Location Services
|
|
</FieldLabel>
|
|
<FieldDescription>
|
|
Allow apps to access your location
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="responsive-location" />
|
|
</Field>
|
|
<Field orientation="responsive">
|
|
<Checkbox id="responsive-checkbox" />
|
|
<FieldLabel
|
|
htmlFor="responsive-checkbox"
|
|
className="font-normal"
|
|
>
|
|
I agree to the terms and conditions
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function CheckoutForm() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Checkout</CardTitle>
|
|
<CardDescription>
|
|
Complete your order by filling in the details below
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Shipping Information</FieldLegend>
|
|
<FieldDescription>
|
|
Enter your shipping address where we'll deliver your order
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-first-name-dso">
|
|
First Name
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-first-name-dso"
|
|
placeholder="John"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-last-name-qmb">
|
|
Last Name
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-last-name-qmb"
|
|
placeholder="Doe"
|
|
required
|
|
/>
|
|
</Field>
|
|
</div>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-email-t33">
|
|
Email
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-email-t33"
|
|
type="email"
|
|
placeholder="john.doe@example.com"
|
|
required
|
|
/>
|
|
<FieldDescription>
|
|
We'll send your receipt to this email
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-address-zgo">
|
|
Street Address
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-address-zgo"
|
|
placeholder="123 Main Street"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-address2-d4t">
|
|
Apartment, suite, etc. (optional)
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-address2-d4t"
|
|
placeholder="Apartment 4B"
|
|
/>
|
|
</Field>
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
|
<Field className="sm:col-span-2">
|
|
<FieldLabel htmlFor="checkout-7j9-city-poj">
|
|
City
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-city-poj"
|
|
placeholder="New York"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-state-psg">
|
|
State
|
|
</FieldLabel>
|
|
<Select defaultValue="">
|
|
<SelectTrigger id="checkout-7j9-state-psg">
|
|
<SelectValue placeholder="Select" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ca">CA</SelectItem>
|
|
<SelectItem value="ny">NY</SelectItem>
|
|
<SelectItem value="tx">TX</SelectItem>
|
|
<SelectItem value="fl">FL</SelectItem>
|
|
<SelectItem value="wa">WA</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-zip">ZIP Code</FieldLabel>
|
|
<Input id="checkout-7j9-zip" placeholder="10001" required />
|
|
</Field>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-country-code-fl7">
|
|
Code
|
|
</FieldLabel>
|
|
<Select defaultValue="us">
|
|
<SelectTrigger id="checkout-7j9-country-code-fl7">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="us">+1</SelectItem>
|
|
<SelectItem value="uk">+44</SelectItem>
|
|
<SelectItem value="ca">+1</SelectItem>
|
|
<SelectItem value="au">+61</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field className="col-span-3">
|
|
<FieldLabel htmlFor="checkout-7j9-phone-g63">
|
|
Phone Number
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-phone-g63"
|
|
type="tel"
|
|
placeholder="(555) 123-4567"
|
|
required
|
|
/>
|
|
</Field>
|
|
</div>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Payment Method</FieldLegend>
|
|
<FieldDescription>
|
|
All transactions are secure and encrypted
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-card-name-43j">
|
|
Name on Card
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-card-name-43j"
|
|
placeholder="John Doe"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-card-number-uw1">
|
|
Card Number
|
|
</FieldLabel>
|
|
<Input
|
|
id="checkout-7j9-card-number-uw1"
|
|
placeholder="1234 5678 9012 3456"
|
|
required
|
|
/>
|
|
<FieldDescription>
|
|
Enter your 16-digit card number
|
|
</FieldDescription>
|
|
</Field>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-exp-month-ts6">
|
|
Month
|
|
</FieldLabel>
|
|
<Select defaultValue="">
|
|
<SelectTrigger id="checkout-7j9-exp-month-ts6">
|
|
<SelectValue placeholder="MM" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="01">01</SelectItem>
|
|
<SelectItem value="02">02</SelectItem>
|
|
<SelectItem value="03">03</SelectItem>
|
|
<SelectItem value="04">04</SelectItem>
|
|
<SelectItem value="05">05</SelectItem>
|
|
<SelectItem value="06">06</SelectItem>
|
|
<SelectItem value="07">07</SelectItem>
|
|
<SelectItem value="08">08</SelectItem>
|
|
<SelectItem value="09">09</SelectItem>
|
|
<SelectItem value="10">10</SelectItem>
|
|
<SelectItem value="11">11</SelectItem>
|
|
<SelectItem value="12">12</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-exp-year-f59">
|
|
Year
|
|
</FieldLabel>
|
|
<Select defaultValue="">
|
|
<SelectTrigger id="checkout-7j9-exp-year-f59">
|
|
<SelectValue placeholder="YYYY" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="2024">2024</SelectItem>
|
|
<SelectItem value="2025">2025</SelectItem>
|
|
<SelectItem value="2026">2026</SelectItem>
|
|
<SelectItem value="2027">2027</SelectItem>
|
|
<SelectItem value="2028">2028</SelectItem>
|
|
<SelectItem value="2029">2029</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="checkout-7j9-cvv">CVV</FieldLabel>
|
|
<Input id="checkout-7j9-cvv" placeholder="123" required />
|
|
</Field>
|
|
</div>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Billing Address</FieldLegend>
|
|
<FieldDescription>
|
|
The billing address associated with your payment method
|
|
</FieldDescription>
|
|
<FieldGroup>
|
|
<Field orientation="horizontal">
|
|
<Checkbox
|
|
id="checkout-7j9-same-as-shipping-wgm"
|
|
defaultChecked
|
|
/>
|
|
<FieldLabel
|
|
htmlFor="checkout-7j9-same-as-shipping-wgm"
|
|
className="font-normal"
|
|
>
|
|
Same as shipping address
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<FieldSet>
|
|
<FieldLegend>Additional Options</FieldLegend>
|
|
<FieldDescription>
|
|
Choose how you'd like us to stay in touch
|
|
</FieldDescription>
|
|
<FieldGroup className="gap-3">
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="checkout-7j9-save-info-zdo" />
|
|
<FieldLabel
|
|
htmlFor="checkout-7j9-save-info-zdo"
|
|
className="font-normal"
|
|
>
|
|
Save my information for faster checkout next time
|
|
</FieldLabel>
|
|
</Field>
|
|
<Field orientation="horizontal">
|
|
<Checkbox id="checkout-7j9-newsletter-6yv" />
|
|
<FieldLabel
|
|
htmlFor="checkout-7j9-newsletter-6yv"
|
|
className="font-normal"
|
|
>
|
|
Email me with news and offers
|
|
</FieldLabel>
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<Field>
|
|
<Button type="submit" className="flex-1">
|
|
Complete Order
|
|
</Button>
|
|
<Button variant="outline" className="flex-1">
|
|
Return to Cart
|
|
</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|