Home
Components
Charts

Getting Started

Introduction Installation Client Side Routing MCP Server LLMs

Framework Guides

Nextjs Laravel Tanstack Start Vite

Components

Buttons

Button File Trigger Toggle Toggle Group

Charts

Collections

Accordion Attachment Bubble Collapsible Dropdown Menu Grid List Item List Box Message Table Tag Group Tree

Colors

Controls

Command Kbd Slider Switch Toolbar

Date And Time

Calendar Date Field Date Picker Date Range Picker Range Calendar Time Field

Drag And Drop

Forms

Checkbox Combo Box Field Input Input Group Input OTP Number Field Radio Search Field Select Text Field

Layouts

Container Navbar Sidebar

Media

Avatar Carousel

Navigation

Breadcrumbs Link Pagination Tabs

Overlays

Alert Dialog Dialog Drawer Popover Sheet Tooltip

Statuses

Alert Badge Empty Meter Progress Skeleton Sonner

Surfaces

Text Field

A text field allows a user to enter a plain text value with a keyboard.

Select Container

Installation

CLI

Manual

npx shadcn add https://hq-ui.vercel.app/r/nova/text-field

Examples

text-field-demo

Basic

Readonly

Invalid

Disabled

HQ UI © 2025 - This UI design was crafted by Diqi Al-Haqqi

Special thanks for Intent UI by Irsyad A. Pandjaitan for inspiration

On this page

Installation
Examples

On this page

Installation
Examples