BwInput | bw-input

Overview

Input is a form control that allows the user to enter text. It can be used as a single line input or a multiline input. It has a dropdown slot to transform the component into a combobox.

Usage

States

search

<div style="display: flex; gap: 4px; flex-direction: column;">
  <bw-input></bw-input>
  <bw-input placeholder="Type something..."></bw-input>
  <bw-input label="Name" placeholder="Enter your name"></bw-input>
  <bw-input type="search">
    <bw-icon slot="start">search</bw-icon>
  </bw-input>
</div>

Properties

Property	Attribute	Description	Type	Default
autoCapitalize	auto-capitalize	Passed to native input	string	'off'
autoComplete	auto-complete	Passed to native input	string	'off'
autoCorrect	auto-correct	Passed to native input	"off" | "on"	'off'
autoFocus	auto-focus	Passed to native input	boolean	undefined
debounce	debounce	Optional debounce of the didInput event	number	0
disabled	disabled	Renders input as disabled and prevents changes	boolean	false
error	error	Shows an error icon in the end slot when true. If a string is passed in, it will render the icon as a tooltip. Has no effect on form validation	any	undefined
format	format	Formatters functions that are applied as the user types	(newValue: string, oldValue?: string, ev?: InputEvent) => string | Promise<string>	undefined
hidePasswordIcon	hide-password-icon	Whether to hide the password icon	boolean	false
hidePicker	hide-picker	Whether to hide the calendar icon	boolean	false
inputMode	input-mode	Passed to native input	string	undefined
label	label	Text above the control	string	''
list	list	Passed to native input	string	undefined
max	max	Passed to native input	any	undefined
maxlength	maxlength	Passed to native input	number	undefined
min	min	Passed to native input	any	undefined
minlength	minlength	Passed to native input	number	undefined
multiline	multiline	Whether the control is a multiline textarea	boolean	false
note	note	Informational message directly below the control	string	undefined
offsetX	offset-x	X offset of the dropdown	number	0
offsetY	offset-y	Y offset of the dropdown	number	10
originalValue	original-value	The default value the control will reset to in a form. If not set, will default to the inital value of the "value" property.	string	undefined
pattern	pattern	Passed to native input	string	undefined
pending	pending	Shows a loading indicator in the end slot when true	boolean	false
placeholder	placeholder	Input placeholder text	string	''
readonly	readonly	Renders input as read only and prevents changes	boolean	false
required	required	Marks as required in form and adds asterisk to the end of the label	boolean	false
size	size	Container size	"large" | "medium" | "small"	'small'
spellcheck	spellcheck	Passed to native input	boolean	false
step	step	Passed to native input	string	undefined
success	success	Shows a success icon in the end slot when true. Has no effect on form validation	boolean	false
timeZone	time-zone	Time zone for the built in date and datetime transformers. Defaults to the browser's time zone if not set. You can set this value globally by setting window.blueWater?.defaultTimeZone to the desired time zone.	string	undefined
transform	transform	Transforms the value before it is passed to the input (from) and after the input emits a new value (to). There are built-in transformers for 'number', 'date', and 'datetime'.	"date" | "datetime" | "number" | ({ to?: (value: string) => any; from?: (value: any) => string; })	undefined
type	type	Passed to native input	string	'text'
validators	validators	Validator functions for form participation	ValidationFn[]	undefined
value	value	Current value of the input	any	''
wrap	wrap	Passed to native textarea	string	undefined

Events

Event	Description	Type
dropdownDismiss	Emits when the dropdown is closed	CustomEvent<any>
dropdownPresent	Emits when the dropdown is opened	CustomEvent<any>
valueChange	Emits as the user types	CustomEvent<any>
valueSubmit	Emits whenever the user hits enter or the control loses focus	CustomEvent<any>

Methods

dismissDropdown() => Promise<void>

Dismisses the dropdown

Returns

Type: Promise<void>

getErrors() => Promise<{ requiredError: boolean; minLengthError: boolean; maxLengthError: boolean; patternError: boolean; customErrors: string[]; badInputError: boolean; hasError: boolean; }>

Returns the errors of the input

Returns

Type: Promise<{ requiredError: boolean; minLengthError: boolean; maxLengthError: boolean; patternError: boolean; customErrors: string[]; badInputError: boolean; hasError: boolean; }>

getInputElement() => Promise<HTMLInputElement>

Returns the input element

Returns

Type: Promise<HTMLInputElement>

getIsTouched() => Promise<boolean>

Returns whether the input is touched

Returns

Type: Promise<boolean>

isDropdownOpen() => Promise<boolean>

Returns whether the dropdown is open

Returns

Type: Promise<boolean>

markAsTouched() => Promise<void>

Marks the input as touched

Returns

Type: Promise<void>

presentDropdown() => Promise<void>

Presents the dropdown

Returns

Type: Promise<void>

togglePassword() => Promise<void>

Toggles the password visibility

Returns

Type: Promise<void>

Slots

Slot	Description
"after"	Elements placed here will be to the right of the input, outside the container
"before"	Elements placed here will be to the left of the input, outside the container
"dropdown"	Place a BwMenu here to use the input as a combobox
"end"	Elements placed here will be to the left of the input, inside the container
"label"	Goes above the input, intended for a BwLabel
"note"	Goes below the input, intended for a BwNote
"start"	Elements placed here will be to the right of the input, inside the container

Shadow Parts

Part	Description
"container"	The container of the input
"dropdown"	The dropdown container
"label"	The label of the input
"native-input"	The native input element
"native-textarea"	The native textarea element
"note"	The note of the input
"outer-container"	The container where the before/after slots are.

CSS Custom Properties

Name	Description
--background	The background of the input
--border	The border of the input
--height	The height of the input
--input-color	The color of the input
--label-color	The color of the label
--multiline-height	The height of the multiline input
--padding-inline	The padding of the input
--placeholder-color	The color of the placeholder

Dependencies

Used by

• bw-dialog
• bw-map-search

Depends on

• bw-label
• bw-icon-button
• bw-loading
• bw-color
• bw-icon
• bw-tooltip
• bw-note

Graph

---

© 2025 United Systems & Software - All Rights Reserved.