Input

The Input component is a single, variant-driven field that switches between different input types based on the variant prop. Instead of importing separate components for each input type, you use one Input and set variant to get the field you need — from a basic text field to a currency input, phone number, date picker, OTP code, or rich text editor.

All variants share common props for labels, helper text, error handling, and disabled state. Each variant also accepts its own specialised props.

Usage

Loading Code Block...

Full example

A basic text input with a label and helper text.

Input

This is an input field.

Loading Code Block...

Variants

The variant prop determines which input type is rendered. All variants share the same common props (label, helperText, error, disabled, etc.) and each variant adds its own specialised props documented below.

Variant	Description
default	Standard text input with optional left/right icons.
currency	Numeric input with a currency prefix (e.g. GHS).
mobile-number	Phone number input with country code selector.
select	Dropdown select with single or multi-select support.
counter	Numeric stepper with increment/decrement buttons.
search	Text input styled for search with optional icon placement.
otp	One-time password input with individual character cells.
date	Date picker with single date or date range selection.
rich-text-area	Rich text editor with formatting toolbar.

Use the variant dropdown below to switch between input types — the preview and the matching code update together:

default

Name

Loading Code Block...

Disabled

Set disabled to prevent user interaction. All variants support the disabled state with reduced opacity and cursor-not-allowed.

Name

Loading Code Block...

Error state

Set error to true to apply error styling to the field, and pass the message via the errorMessage prop.

Email

Please enter a valid email address

Loading Code Block...

Helper text with icons

Use helperText to display guidance below the input. The helperTextIconType prop controls which icon appears alongside the helper text.

Icon type	Description
info	Information icon (default)
warning	Warning triangle icon
check	Checkmark icon for success/validation

Use the interactive demo below to switch between helper text icon variants and see the matching code update automatically:

Info

Username

Must be at least 3 characters

Loading Code Block...

---

Common Props

These props are shared across all variants.

Props	Default	Type	Description
variant	'default'	'default' | 'currency' | 'mobile-number' | 'select' | 'counter' | 'search' | 'otp' | 'date' | 'rich-text-area'	Determines which input type is rendered. Each variant activates a different underlying component with its own specialised props.
label	-	string	Label text displayed above the input field.
placeholder	-	string	Placeholder text shown inside the input when empty.
disabled	false	boolean	Disables the input, preventing user interaction. Applies reduced opacity and cursor-not-allowed.
required	false	boolean	Marks the field as required. Displays an asterisk next to the label.
helperText	-	string	Helper text displayed below the input to provide guidance. Overridden when `error` is provided.
helperTextIconType	'info'	'info' | 'warning' | 'check'	Icon displayed alongside the helper text. Choose 'info' for guidance, 'warning' for alerts, or 'check' for validation success.
error	false	boolean	When true, applies error styling to the input (red border + error helper colour). Use together with `errorMessage` for the message line.
errorMessage	-	string	Message displayed below the input when `error` is true. Overrides `helperText` for the message line. Available across Currency, Phone, Select, DatePicker, Counter, Verification (OTP), and the shared `Input`.
hint	-	string	Hint text displayed near the label, often used for additional context or character limits.
id	-	string	HTML id attribute for the input element.
name	-	string	HTML name attribute for form submission.

Default variant props

Additional props available when variant="default".

Currency variant props

Additional props available when variant="currency".

Props	Default	Type	Description
currency	'GHS'	string	Currency code displayed as a prefix in the input.
endsWithZeros	false	boolean	When true, formats the value to always end with two decimal zeros (e.g. 10.00).
hint	-	string	Hint text displayed as a tooltip near the currency input.

Mobile number variant props

Additional props available when variant="mobile-number".

Props	Default	Type	Description
countryCodeDisplayType	'code'	'code' | 'flag'	How the country code is displayed — as a dial code string or a flag emoji/icon.
intl	false	boolean	When true, enables international phone number format support with country selection.
dropdownMaxHeight	250	number	Maximum height (in pixels) of the country list inside the international dial-code dropdown. Content beyond this height scrolls internally. Only applies when `intl` is true. Passed through to the country picker's inline max-height style.

Select variant props

Additional props available when variant="select".

Props	Default	Type	Description
options	-	Array<{ label: string; value: string }>	Array of selectable options displayed in the dropdown.
multiple	false	boolean	When true, allows selecting multiple options.
showSearch	false	boolean	When true, shows a search input within the dropdown to filter options.
clearable	false	boolean	When true, allows clearing the currently selected option.
wrap	false	boolean	When true, selected values wrap onto multiple lines instead of scrolling horizontally.
onSelectionChange	-	(selected: string | string[]) => void	Callback fired when the user selects or deselects an option.
isOpen	-	boolean	Controlled open state for the dropdown. When provided, use `onOpenChange` to sync state.
onOpenChange	-	(open: boolean) => void	Callback fired when the dropdown opens or closes.
capped	-	boolean	When true, limits the height of the multi-select chip container.
dropdownMaxHeight	250	number	Maximum height (in pixels) of the options list inside the select dropdown. Options beyond this height scroll internally, keeping the trigger anchored. Useful when you have long option lists and want to cap the popup's vertical footprint.

Long label truncation

When a selected option has a long label, the Select component automatically truncates it with an ellipsis (…) to prevent layout distortion. The full label is accessible via a native tooltip on hover.

This ensures the select trigger maintains a consistent height and width regardless of the option label length.

normal-label

Country

Select a country

Loading Code Block...

Counter variant props

Additional props available when variant="counter".

Props	Default	Type	Description
min	100	number	Minimum allowed value for the counter.
max	1000	number	Maximum allowed value for the counter.
value	0	number	Current value of the counter.
step	1	number	Increment/decrement step value.
controlsPosition	'center'	'center' | 'right'	Position of the increment/decrement controls relative to the input.
onCounterUp	-	(value: number) => void	Callback fired when the increment (plus) control is activated. Receives the new clamped value.
onCounterDown	-	(value: number) => void	Callback fired when the decrement (minus) control is activated. Receives the new clamped value.

Search variant props

Additional props available when variant="search". The variant="search" routes the unified Input to a dedicated SearchInput component under the hood, so you can keep using the unified Input API or import SearchInput directly when you only need the search field.

// Both renders are equivalent in React.
import { Input } from "@hubtel/react-ui/input";
import { SearchInput } from "@hubtel/react-ui/input";

<Input
  variant="search"
  placeholder="Search transactions"
  showCloseIcon
  onSearch={(value) => fetchResults(value)}
  onClear={() => fetchResults("")}
/>

<SearchInput
  placeholder="Search transactions"
  showCloseIcon
  onSearch={(value) => fetchResults(value)}
  onClear={() => fetchResults("")}
/>

OTP variant props

Additional props available when variant="otp".

Props	Default	Type	Description
inputLength	6	number	Number of individual character cells rendered for the OTP code.
hint	-	string	Hint text displayed near the OTP input.

Date variant props

Additional props available when variant="date".

Props	Default	Type	Description
mode	'single'	'single' | 'range'	Selection mode — 'single' for a single date or 'range' for a start/end date range.
allowPastDates	false	boolean	When true, allows selection of dates in the past.
minDate	-	Date | string	Minimum selectable date. Dates before this are disabled.
maxDate	-	Date | string	Maximum selectable date. Dates after this are disabled.
maxSelectableMonths	3	number	Maximum span in months for date range selection.

Rich text area variant props

Additional props available when variant="rich-text-area".

Props	Default	Type	Description
editorHeight	'100px'	string	CSS height of the rich text editor area.

Accessibility

• All input variants render with an associated <label> element when the label prop is provided, ensuring screen readers can announce the field purpose.
• The required prop adds visual indication (asterisk) and semantic attributes.
• Error messages are displayed inline below the input with appropriate styling for visibility.
• Helper text icons (info, warning, check) provide visual cues that complement the text content — the text itself carries the information.
• The OTP variant supports keyboard navigation between cells (auto-advance on input, backspace navigation).
• The select variant uses keyboard-accessible dropdown controls.

Best practices

Variant selection

Choose the most specific variant for your use case rather than building custom logic with the default variant. For example, use variant="currency" for monetary inputs instead of adding a prefix manually.

Error messages

Provide specific, actionable error messages — “Email must include an @ symbol” is better than “Invalid input”. The error prop automatically overrides helperText, so you don’t need to manage both states manually.

Helper text

Always include helperText for complex inputs (currency, date range, OTP) to set expectations about the expected format.

Variant switching

Do not change the variant prop dynamically at runtime based on user input. Each variant initialises its own internal state, and switching variants without a remount can cause unexpected behaviour.