104Get started
HextaUI

Input types

Password, number, search, date and time share one height and frame. In dark mode, the browser’s pickers and spinners switch to dark too.

import { Input } from "@/components/ui/input"

export function InputTypes() {
  return (
    <div className="grid w-full max-w-sm gap-3">
      <Input type="password" aria-label="Password" defaultValue="hunter2" />
      <Input type="number" aria-label="Seats" defaultValue={12} min={1} />
      <Input type="search" aria-label="Search" placeholder="Search…" />
      <Input type="date" aria-label="Start date" defaultValue="2026-10-03" />
      <Input type="time" aria-label="Start time" defaultValue="09:30" />
    </div>
  )
}

Add this example

This adds the example as components/examples/input/types.tsx, together with the Input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-types.json

To add only the component, follow the Input installation.

Props in this example

The Input props this example sets, from the API reference.

Input

PropTypeDefault
defaultValue
string | number | string[]–
type
string"text"

Every prop is in the Input API reference.

More Input examples

See them all, with keyboard support and accessibility notes, on the Input page.

Related components