Input

A styled text input component with label, validation, icons, and grouped layouts.

Installation


pnpm dlx bna-ui add input

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

<Input label='Username' placeholder='Enter your username' icon={User} />

The main input component with label, validation, and icon support. Extends all TextInputProps except style.

Prop	Type	Default	Description
`label`	`string`	-	Label text displayed inside the input
`error`	`string`	-	Error message to display below the input
`icon`	`React.ComponentType<LucideProps>`	-	Lucide icon component to display on the left
`rightComponent`	`ReactNode \| (() => ReactNode)`	-	Component or function returning component for right side
`containerStyle`	`ViewStyle`	-	Style for the outer container
`inputStyle`	`TextStyle`	-	Style for the text input
`labelStyle`	`TextStyle`	-	Style for the label text
`errorStyle`	`TextStyle`	-	Style for the error message
`variant`	`'filled' \| 'outline'`	`'filled'`	Visual variant of the input
`disabled`	`boolean`	`false`	Whether the input is disabled
`type`	`'input' \| 'textarea'`	`'input'`	Switches the layout to a multiline textarea when set to `'textarea'`.
`rows`	`number`	`4`	Number of visible text lines. Only used when `type` is `"textarea"`.
`placeholder`	`string`	`'Type your message...'` when `type` is `"textarea"`	Placeholder text shown when the input is empty. `type="textarea"` falls back to a default when omitted; `type="input"` has no fallback.

Container component for grouping multiple inputs together.

Prop	Type	Description
`children`	`ReactNode`	Child components (usually GroupedInputItem)
`containerStyle`	`ViewStyle`	Style for the container
`title`	`string`	Optional title for the group
`titleStyle`	`TextStyle`	Style for the title text

Input component designed to be used within GroupedInput. Extends all TextInputProps except style.

Prop	Type	Default	Description
`label`	`string`	-	Label text displayed inside the input
`error`	`string`	-	Error message (displayed at group level)
`icon`	`React.ComponentType<LucideProps>`	-	Lucide icon component to display on the left
`rightComponent`	`ReactNode \| (() => ReactNode)`	-	Component or function returning component for right side
`inputStyle`	`TextStyle`	-	Style for the text input
`labelStyle`	`TextStyle`	-	Style for the label text
`errorStyle`	`TextStyle`	-	Style for the error message
`disabled`	`boolean`	`false`	Whether the input is disabled
`type`	`'input' \| 'textarea'`	`'input'`	Switches the layout to a multiline textarea when set to `'textarea'`.
`rows`	`number`	`3`	Number of visible text lines. Only used when `type` is `"textarea"`.

The Input component is built with accessibility in mind:

The Input component uses your theme colors and can be customized: