A flexible input component for text entry with support for icons, validation, and various input types.
Import
import { InputField, TextArea, InputType } from 'nightwatch-ui';
Basic Usage
<InputField
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Enter text..."
/>
With Icon
<InputField
icon={Icon.Search}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search..."
/>
// Email input
<InputField
type={InputType.EMAIL}
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="[email protected]"
/>
// Password input
<InputField
type={InputType.PASSWORD}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter password"
/>
// Number input
<InputField
type={InputType.NUMBER}
value={count}
onChange={(e) => setCount(e.target.value)}
placeholder="0"
/>
With Validation
<InputField
value={email}
onChange={(e) => setEmail(e.target.value)}
error={emailError}
helperText="Enter a valid email address"
/>
Variants
// Default variant
<InputField variant={InputFieldVariant.DEFAULT} />
// Ghost variant (no background)
<InputField variant={InputFieldVariant.GHOST} />
// Search variant
<InputField variant={InputFieldVariant.SEARCH} />
Sizes
<InputField size={Size.X_SMALL} placeholder="Extra small" />
<InputField size={Size.SMALL} placeholder="Small" />
<InputField size={Size.MEDIUM} placeholder="Medium" />
<InputField size={Size.LARGE} placeholder="Large" />
With End Adornment
<InputField
value={value}
onChange={handleChange}
endAdornment={<IconButton icon={Icon.Close} onClick={clearInput} />}
/>
onChange
(e: React.ChangeEvent<HTMLInputElement>) => void
Callback fired when input value changes
Placeholder text displayed when input is empty
type
InputType
default:"InputType.DEFAULT"
Input type. Options:
InputType.DEFAULT - Normal text inputInputType.EMAIL - Email input with email keyboardInputType.NUMBER - Numeric input with number keyboardInputType.PASSWORD - Password input with hidden text
Icon displayed at the start of the input field
endAdornment
Icon | React.ReactNode | React.ReactNode[]
Content displayed at the end of the input field (icons, buttons, etc.)
size
InputFieldSize
default:"Size.MEDIUM"
Input field size. Options: Size.X_SMALL, Size.SMALL, Size.MEDIUM, Size.LARGE
variant
InputFieldVariant
default:"InputFieldVariant.DEFAULT"
Visual variant. Options:
InputFieldVariant.DEFAULT - Standard input with backgroundInputFieldVariant.GHOST - No background or paddingInputFieldVariant.SEARCH - Optimized for search
Error state. Pass true for error styling, or a string to show an error message
Helpful context text displayed below the input
Makes the input read-only (not editable but focusable)
Controlled active/focused state
Automatically focuses the input on mount
HTML autocomplete attribute value
Custom border radius in pixels
Font weight for the input text
Custom typography size override
Overrides the current theme
innerRef
React.Ref<HTMLInputElement>
Ref passed to the inner input element
onFocus
(e: React.FocusEvent<HTMLInputElement>) => void
Callback fired when input receives focus
onBlur
(e: React.FocusEvent<HTMLInputElement>) => void
Callback fired when input loses focus
onKeyDown
(e: React.KeyboardEvent<HTMLInputElement>) => void
Callback fired on key down events
onKeyPress
(e: React.KeyboardEvent<HTMLInputElement>) => void
Callback fired on key press events
onPaste
React.ClipboardEventHandler<HTMLInputElement>
Callback fired when content is pasted
onClick
(e: React.MouseEvent) => void
Callback fired when input is clicked
onMouseEnter
MouseEventHandler<HTMLInputElement>
Callback fired when mouse enters the input
onMouseLeave
MouseEventHandler<HTMLInputElement>
Callback fired when mouse leaves the input
Test identifier for e2e tests
TextArea
A multi-line text input component for longer text content.
Basic Usage
<TextArea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Enter description..."
/>
