Input

Displays a form input field or a component that looks like an input field.

Basic

Value:

Example

Disabled

Example

Readonly

Example

Sizes

Example

With Icons

Example

Clearable

Example

Password

Example

Error State

Example

Theming

You can customize the appearance of the input using Tailwind CSS classes or by overriding the CSS variables in your global CSS.

CSS Variables

:root {
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

.dark {
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

Tailwind Customization

You can also use class prop to add custom styles:

<BrInput class="border-blue-500 focus-visible:ring-blue-500" />

API

Props

Prop	Type	Default	Description
modelValue	string | number	-	The value of the input.
defaultValue	string | number	-	The default value of the input.
type	string	text	HTML input type attribute.
disabled	boolean	false	Whether the input is disabled.
readonly	boolean	false	Whether the input is read-only.
placeholder	string	-	Placeholder text.
size	xs | sm | md | default | lg | xl | 2xl	default	The size of the input.
error	boolean	false	Whether to show error state.
clearable	boolean	false	Whether to show a clear button when input has value.
showPassword	boolean	false	Whether to show password toggle button (only works with type="password").

Slots

Name	Description
prefix	Content to display before the input text.
suffix	Content to display after the input text.

Events

Name	Payload	Description
update:modelValue	string | number	Emitted when input value changes.
clear	-	Emitted when the clear button is clicked.
input	Event	Emitted when the input value changes.
change	Event	Emitted when the input value changes (on blur or enter).
focus	Event	Emitted when the input is focused.
blur	Event	Emitted when the input is blurred.