ComponentsBlocksDocsExamples

Accordion
Field
Accordion Menu
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Carousel
Checkbox
Collapsible
Command
Combobox
Context Menu
Date Picker
Dialog
Dropdown Menu
Form
Filters
New
Hover Card
Input
Update
Label
Menubar
Navigation Menu
Popover
Progress
Radio Group
Scroll Area
Select
Separator
Sheet
Slider
Sortable
Switch
Table
Tabs
Tooltip
Toggle
Toggle Group
Tree

Components

Input

UI Library:

Displays a form input field or a component that looks like an input field, input groups, number input spinners, date input, date time input, time inputs, etc.

Open in
Loading

Installation

pnpm dlx shadcn@latest add @toui/input

Examples

Disabled

Open in
Loading

Readonly

Open in
Loading

Addon

Open in
Loading

Icon

Open in
Loading

File

Open in
Loading

Date

Open in
Loading

Time

Open in
Loading

Date & Time

Open in
Loading

Copy to clipboard

Open in
Loading

Clear button

Open in
Loading

Size

Open in
Loading

Form

Open in
Loading

API Reference

This component extends the native HTML <input> element with additional styling and size variants.

Input

This component is a custom implementation that extends the native HTML <input> element with the following custom props:

PropTypeDefault
variant enum "md"
className string

Credits

  • Built with Radix UI Slot.
  • Built with React Aria.
PreviouseHover CardNextLabel

On This Page

  • Installation
  • Examples
    • Disabled
    • Readonly
    • Addon
    • Icon
    • File
    • Date
    • Time
    • Date & Time
    • Copy to clipboard
    • Clear button
    • Size
    • Form
  • API Reference
    • Input
  • Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.

Token UI

Components

  • Overview
  • Pricing
  • Marketplace
  • Features
  • Integrations
  • Pricing

Blocks

  • Charts
  • Team
  • Blog
  • Careers
  • Contact
  • Privacy

Examples

  • Help
  • Sales
  • Advertise

Docs

  • Twitter
  • Instagram
  • LinkedIn

© 2025 TOUI.dev. All rights reserved.

  • Terms and Conditions
  • Privacy Policy