Base Input

BaseInput Design Tokens

Token Name	Description	State/Usage
`--par-color-text-field-filled`	Input text color	Enabled
`--par-color-text-field-placeholder`	Placeholder text color	Enabled
`--par-color-text-field-disabled`	Input text color	Disabled
`--par-color-text-field-readonly`	Input text color	Readonly
`--par-color-text-field-invalid`	Input text color	Error
`--par-color-border-field-enabled`	Input border color	Enabled
`--par-color-border-field-disabled`	Input border color	Disabled
`--par-color-border-field-readonly`	Input border color	Readonly
`--par-color-border-field-invalid`	Input border color	Error
`--par-color-bg-field-enabled`	Input background color	Enabled
`--par-color-bg-field-disabled`	Input background color	Disabled
`--par-color-bg-field-readonly`	Input background color	Readonly
`--par-color-bg-field-invalid`	Input background color	Error
`--par-color-bg-field-button-enabled`	Action button background	Enabled
`--par-color-bg-field-button-hovered`	Action button background	Hover
`--par-color-bg-field-button-pressed`	Action button background	Pressed
`--par-color-bg-field-button-disabled`	Action button background	Disabled
`--par-color-icon-field-button-enabled`	Action button icon color	Enabled
`--par-color-icon-field-button-hovered`	Action button icon color	Hover
`--par-color-icon-field-button-pressed`	Action button icon color	Pressed
`--par-color-icon-field-button-disabled`	Action button icon color	Disabled
`--par-color-text-field-alternative-placeholder`	Placeholder text color (alternative theme)	Enabled (alt)
`--par-color-bg-field-alternative-enabled`	Input background color (alternative theme)	Enabled (alt)
`--par-color-bg-field-alternative-disabled`	Input background color (alternative theme)	Disabled (alt)

BaseInput Component API

`<BaseInput />`

Prop	Type	Default	Description
`type`	string	`'text'`	Input type (e.g. 'text', 'number', 'date', etc.)
`value`	string		Input value
`placeholder`	string	`''`	Placeholder text
`disabled`	boolean	`false`	Disable the input
`readOnly`	boolean	`false`	Set input as read-only
`inputSize`	'sm' or 'md'	`'sm'`	Input size
`theme`	'default' or 'alternative'	`'default'`	Input theme
`isClearable`	boolean	`false`	Show clear button
`ActionBtn`	JSX.Element or React.ReactNode		Custom action button on the right
`leftIcon`	React.ReactNode		Icon on the left side
`isError`	boolean	`false`	Error state
`errorMessage`	string		Error message
`floatingLabel`	React.ReactNode		Floating label
`onChange`	function(event)		Callback when input value changes
`onClear`	function()		Callback when clear button is clicked
`wrapperProps`	object		Additional props for the input wrapper
`clearBtnProps`	object		Additional props for the clear button