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 { ChevronDown, Clock } from "@gravity-ui/icons"
import { Description, Label } from "@heroui/react"
export default function WithIcons() {
return (
<div className="flex min-h-[340px] w-full flex-col items-center justify-center gap-6 p-8">
<TimeField className="w-[256px]" name="time">
<Label>Time</Label>
<TimeField.Group>
<TimeField.Prefix>
<Clock className="size-4 text-muted" />
</TimeField.Prefix>
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
</TimeField.Group>
</TimeField>
<TimeField className="w-[256px]" name="time-suffix">
<Label>Time</Label>
<TimeField.Group>
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
<TimeField.Suffix>
<Clock className="size-4 text-muted" />
</TimeField.Suffix>
</TimeField.Group>
</TimeField>
<TimeField className="w-[256px]" name="time-both">
<Label>Time</Label>
<TimeField.Group>
<TimeField.Prefix>
<Clock className="size-4 text-muted" />
</TimeField.Prefix>
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
<TimeField.Suffix>
<ChevronDown className="size-4 text-muted" />
</TimeField.Suffix>
</TimeField.Group>
<Description>Enter a time</Description>
</TimeField>
</div>
)
}