Input

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

Component input-demo does not have a preview available.

Installation


pnpm dlx bna-ui add input

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

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

Component input-demo does not have a preview available.

Component input-icons does not have a preview available.

Component input-variants does not have a preview available.

Component input-validation does not have a preview available.

Component input-right-components does not have a preview available.

Component input-disabled does not have a preview available.

Component input-grouped does not have a preview available.

Component input-form does not have a preview available.

The main input component with label, validation, and icon support.

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

Extends all TextInputProps except style.

Container component for grouping multiple inputs together.

Prop	Type	Default	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.

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

Extends all TextInputProps except style.

The Input component is built with accessibility in mind:

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

On This Page