Components
Loading preview...
Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-time-field"use client"
import { TimeField } from "@/components/ui/heroui-time-field"
import { Description, Label } from "@heroui/react"
export default function Variants() {
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-8">
<div className="flex flex-col gap-4">
<TimeField className="w-[256px]" name="time-primary">
<Label>Primary</Label>
<TimeField.Group variant="primary">
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
</TimeField.Group>
<Description>Default style with shadow</Description>
</TimeField>
<TimeField className="w-[256px]" name="time-secondary">
<Label>Secondary</Label>
<TimeField.Group variant="secondary">
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
</TimeField.Group>
<Description>Lower emphasis, no shadow</Description>
</TimeField>
</div>
</div>
)
}