InputGroup

Introduction

The InputGroup component enables advanced input layouts by combining text fields with add-ons, buttons, icons, selects, checkboxes, radios, and loading spinners. It supports both leading and trailing add-ons, inline elements, multiple sizes, validation states, and full reactivity via Pulse signals. InputGroup is ideal for financial inputs, search bars, phone numbers, and any scenario requiring contextual elements around an input.

Import

import { InputGroup } from '@odyssee/components';

LiveCodeEditor Examples

Basic Text Addons

Code Éditable

Résultat

Multiple Addons

Code Éditable

Résultat

Button Addons

Code Éditable

Résultat

Inline Icons

Code Éditable

Résultat

Checkbox & Radio Addons

Code Éditable

Résultat

Inline Selects

Code Éditable

Résultat

Loading State

Code Éditable

Résultat

Sizes

Code Éditable

Résultat

States: Disabled, Readonly, Error

Code Éditable

Résultat

Props Table

Prop	Type	Default	Description
leadingAddon	InputGroup.Addon | string | Pulse.JSX.Element	—	Add-on element before the input (text, icon, button, checkbox, radio, select, or JSX).
trailingAddon	InputGroup.Addon | string | Pulse.JSX.Element	—	Add-on element after the input.
leadingAddons	Array of InputGroup.Addon | string | Pulse.JSX.Element	—	Multiple add-ons before the input.
trailingAddons	Array of InputGroup.Addon | string | Pulse.JSX.Element	—	Multiple add-ons after the input.
leadingIcon	Pulse.JSX.Element	—	Inline icon before the input (absolute positioned).
trailingIcon	Pulse.JSX.Element	—	Inline icon after the input.
leadingSelect	{ options, value, onChange, label }	—	Inline select before the input.
trailingSelect	{ options, value, onChange, label }	—	Inline select after the input.
loading	boolean | Signal<boolean>	false	Shows a loading spinner (leading or trailing).
loadingPosition	"leading" | "trailing"	"trailing"	Position of the loading spinner.
containerClassName	string	—	Additional CSS classes for the input group container.
containerStyle	Record<string, any>	—	Inline styles for the input group container.
type	string	"text"	Input type (text, email, number, etc.).
value	string | Signal<string>	—	Input value (can be reactive signal).
placeholder	string	""	Placeholder text for the input.
disabled	boolean	false	Disables the input.
readonly	boolean	false	Makes the input read-only.
required	boolean	false	Marks the input as required.
error	string	—	Error message displayed below the input.
label	string	—	Label displayed above the input.
hint	string	—	Optional hint text below the input.
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Size of the input and add-ons.
onChange	(value: string) => void	—	Callback fired when the input value changes.
onFocus	(event: Event) => void	—	Callback fired when the input gains focus.
onBlur	(event: Event) => void	—	Callback fired when the input loses focus.
className	string	—	Additional CSS classes for the input element.
id	string	auto-gen	Unique ID for the input group.
style	React.CSSProperties	—	Inline styles for the input element.
...rest	any	—	Other props are spread to the input element.
Addon fields	See InputGroup.Addon below		Add-ons support type, content, buttonProps, checked, selectOptions, selectValue, etc.

InputGroup.Addon

Field	Type	Description
type	"text" | "icon" | "button" | "checkbox" | "radio" | "select"	Type of addon.
content	string | Pulse.JSX.Element	Content for text/icon/button addons.
buttonProps	Button.Props	Props for button addon.
onClick	() => void	Click handler for button addon.
checked	boolean | Signal<boolean>	Checked state for checkbox/radio addon.
onChange	(checked: boolean) => void	Change handler for checkbox/radio addon.
selectOptions	Select.Option[]	Options for select addon.
selectValue	string | Signal<string>	Selected value for select addon.
onSelectChange	(value: string) => void	Change handler for select addon.
className	string	Additional CSS classes for the addon.

Implementation Notes

• Fully reactive: supports Pulse signals for input value, loading, and addon states.
• Add-ons can be text, icon, button, checkbox, radio, select, or custom JSX.
• Inline elements (icons, selects, spinner) are absolutely positioned for seamless UX.
• Multiple add-ons are supported on both sides.
• Validation states (error, required, disabled, readonly) affect styling and accessibility.
• Sizes are consistent across input and add-ons.
• Container and input styling are customizable via className and style props.

Accessibility

• Uses native <input> with proper labeling via for and id.
• Add-ons are accessible and keyboard-navigable (buttons, selects, checkboxes, radios).
• Error and hint messages are announced via text.
• Loading spinner uses ARIA attributes for status indication.
• Keyboard navigation and focus management are fully supported.

Best Practices

• Use add-ons for contextual information (currency, units, actions).
• Prefer button add-ons for quick actions (search, clear, increment/decrement).
• Use inline icons for visual cues (search, email, user).
• Combine selects for country/currency pickers in phone or price inputs.
• Use validation states to guide user input and improve UX.
• Group related fields for clarity and accessibility.

Related Links

• Input component
• Select component
• Checkbox component
• Radio component
• Pulse Framework documentation