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 { Label } from "@heroui/react"
export default function FullWidth() {
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-8">
<div className="w-[400px] space-y-4">
<TimeField fullWidth name="time">
<Label>Time</Label>
<TimeField.Group fullWidth>
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
</TimeField.Group>
</TimeField>
<TimeField fullWidth name="time-icons">
<Label>Time</Label>
<TimeField.Group fullWidth>
<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>
</TimeField>
</div>
</div>
)
}