Input
A single-line input with optional addons.
Input.Control receives a string value and onChange(value, event); use Input.LeftAddon and Input.RightAddon for addons.
Live example
Example controls
Usage
'use client';
import { Input } from '@prosazhin/pbcomponents';
import { useState } from 'react';
function Example() {
const [value, setValue] = useState('');
return (
<Input>
<Input.Control
value={value}
onChange={setValue}
placeholder='Placeholder'
/>
</Input>
);
}Component API
Compound parts: Input.Control, Input.LeftAddon, Input.RightAddon.
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
size | 's' | 'm's · m | Component size. | m |
disabled | boolean | Disables interaction. | false |
error | boolean | Shows the error state. | false |
Input.Control.placeholder | string | Hint in an empty field. | — |
Input.Control.value | string | Current value of a controlled component. | — |
Input.Control.onChange | (value: string, event: InputEvent) => void | Reports the new text and input event. | — |
className | string | Class of the root element. | — |
wrapperClassName | string | Class of the outer wrapper. | — |
Input.Control.type | HTML input typetext · number · email · password · url · tel · search · date · datetime-local · month · week · time | Input type: text, email, password and other native types. | text |
Input.Control.leftIcon | SvgTypenone · check · search · user | Icon before the text; accepts an SVG component. | — |
Input.Control.rightIcon | SvgTypenone · check · search · user | Icon after the text; accepts an SVG component. | — |
Input.Control.leftIconClassName | string | Class of the left icon. | — |
Input.Control.rightIconClassName | string | Class of the right icon. | — |
Input.Control.textClassName | string | Class of the text part. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.