NOCTA UI

Input

A versatile input component with multiple variants, sizes, icons, and dark mode support

Installation

Install the Input component using the nocta-ui CLI:

npx @nocta-ui/cli add input

Then import the component:

import { Input } from '@/components/ui/input';

Examples

Default Input

Input with Label

Input with Helper Text

Choose a unique username between 3-20 characters

Variants

This field is required

Valid input

Sizes

Left Icon

Right Icon

Disabled State

Read Only State

This field is read-only

Api Reference

Prop

Type

Form

A composable form component with field validation, labels, and actions for building accessible forms

Radio Group

A lightweight and accessible radio group component for selecting a single option, supporting labels, descriptions, and full keyboard navigation

On this page

Installation
Examples
Default Input
Input with Label
Input with Helper Text
Variants
Sizes
Left Icon
Right Icon
Disabled State
Read Only State
Api Reference