Input

Installation

pnpm dlx shadcn@latest add @uitopia/input

Usage

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

<Input />

Examples

For accessible labelling and validation, prefer using the Field component to wrap inputs, or the FieldControl component. See some related examples.

Small Size

Large Size

Disabled

File

With Label

With Button

Form Integration

Comparing with shadcn

Compared to shadcn/ui, our Input component includes size variants for better density control. shadcn/ui inputs have a fixed height of 36px, while our component offers flexible sizing with sm (28px), default (32px), and lg (36px) options.

So, if you want to preserve the original shadcn/ui input height (36px), you should use the lg size in ui/topia.