Input - Turbopills UI

Demo

Full name

As it appears on your ID

Installation

pnpm dlx shadcn@latest add @turbopills-ui/input

Usage


tsx
1import { Input } from "@/components/turbopills/ui/input"


tsx
1export function PatientName() {
2  return (
3    <Input
4      title="Full name"
5      hint="As it appears on your ID"
6      placeholder="John Doe"
7    />
8  )
9}

Examples

With Suffix

Display a unit or label to the right of the input value:

Weight

lbs

Small Size

A compact variant for toolbars, filters, and inline forms:

Error State

Pass errorMessage to display validation feedback below the input:

Please enter a valid email address

Disabled

Account ID

Props

InputFieldProps

Prop	Type	Default	Description
`title`	`string`	—	Optional heading displayed above the input.
`hint`	`string`	—	Optional hint text shown below the title.
`size`	`"md" \| "sm"`	`"md"`	Controls the height and text size of the input.
`suffix`	`React.ReactNode`	—	Content rendered to the right of the input value (e.g. a unit label).
`errorMessage`	`string`	—	When set, shows a red border and displays the error text below the input.
`disabled`	`boolean`	`false`	Disables the input.
`placeholder`	`string`	—	Placeholder text shown when the input is empty.
`wrapperClassName`	`string`	—	Additional class names for the outer wrapper element.
`className`	`string`	—	Additional class names for the `<input>` element itself.

The component also accepts all standard React.InputHTMLAttributes<HTMLInputElement> props (except size, which is replaced by the custom size prop above).