Component reference
Input
A native input with labels, feedback, clear actions and visual variants.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Loading the interactive example?
Width adapts to the available space
"use client";
import { useState } from "react";
import { Checkbox, Input } from "@pimolu/react";
export function InputExample() {
const [value, setValue] = useState("");
const [invalid, setInvalid] = useState(false);
return (
<div className="space-y-5">
<Input
label="Email address"
type="email"
name="email"
placeholder="you@example.com"
value={value}
onValueChange={setValue}
clearable
fullWidth
helperText="Your workspace contact address."
errorMessage={invalid
? "Enter a valid contact address."
: undefined}
/>
<Checkbox
label="Show the invalid state"
checked={invalid}
onCheckedChange={setInvalid}
/>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
From xs to xxl, like the Button.
Variants
The semantic tone of the field.
Appearances
Outline, soft, filled and glass.
Usage
Use the appropriate HTML type and name. value with onValueChange controls the text and keeps the clear action synchronized.
errorMessage replaces helperText and marks the control invalid. className styles the input; containerClassName styles the field wrapper.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluInputProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined | "md" | Component size. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "neutral" | Variant exposed by this component. |
appearance | "soft" | "outline" | "glass" | "filled" | undefined | "outline" | Visual treatment of the control or surface. |
label | string | undefined | — | Visible label associated with the control. |
helperText | string | undefined | — | Supporting text below the field. |
errorMessage | string | undefined | — | Error feedback replacing helper text and marking the field invalid. |
invalid | boolean | undefined | false | Explicit invalid state. |
startIcon | ReactNode | — | Decorative content before the label or input. |
endIcon | ReactNode | — | Decorative content after the label or input. |
fullWidth | boolean | undefined | false | Use the available width of the parent. |
containerClassName | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
clearable | boolean | undefined | false | Show an accessible clear button when the input is not empty. |
clearLabel | string | undefined | — | Accessible label for the clear button. |
onValueChange | ((value: string) => void) | undefined | — | Called whenever the input value changes, including clearing. |
onClear | (() => void) | undefined | — | Called after the clear action. |
passwordToggle | boolean | undefined | false | Enables the password visibility button. |
showPasswordLabel | string | undefined | "Show password" | Accessible label when password is hidden. |
hidePasswordLabel | string | undefined | "Hide password" | Accessible label when password is visible. |
startAction | PimoluInputAction | undefined | — | Interactive button before the input control. |
endAction | PimoluInputAction | undefined | — | Interactive button after the input control. |
onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | — | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
type | HTMLInputTypeAttribute | undefined | "text" | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | — | Standard React/HTML attribute. |
size"xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefinedDefault: "md"
Component size.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "neutral"
Variant exposed by this component.
appearance"soft" | "outline" | "glass" | "filled" | undefinedDefault: "outline"
Visual treatment of the control or surface.
labelstring | undefinedNo default extracted.
Visible label associated with the control.
helperTextstring | undefinedNo default extracted.
Supporting text below the field.
errorMessagestring | undefinedNo default extracted.
Error feedback replacing helper text and marking the field invalid.
invalidboolean | undefinedDefault: false
Explicit invalid state.
startIconReactNodeNo default extracted.
Decorative content before the label or input.
endIconReactNodeNo default extracted.
Decorative content after the label or input.
fullWidthboolean | undefinedDefault: false
Use the available width of the parent.
containerClassNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
clearableboolean | undefinedDefault: false
Show an accessible clear button when the input is not empty.
clearLabelstring | undefinedNo default extracted.
Accessible label for the clear button.
onValueChange((value: string) => void) | undefinedNo default extracted.
Called whenever the input value changes, including clearing.
onClear(() => void) | undefinedNo default extracted.
Called after the clear action.
passwordToggleboolean | undefinedDefault: false
Enables the password visibility button.
showPasswordLabelstring | undefinedDefault: "Show password"
Accessible label when password is hidden.
hidePasswordLabelstring | undefinedDefault: "Hide password"
Accessible label when password is visible.
startActionPimoluInputAction | undefinedNo default extracted.
Interactive button before the input control.
endActionPimoluInputAction | undefinedNo default extracted.
Interactive button after the input control.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedNo default extracted.
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
typeHTMLInputTypeAttribute | undefinedDefault: "text"
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluInputAction
Type source| Name | Type | Default | Description |
|---|---|---|---|
iconRequired | ReactNode | — | Decorative icon displayed inside the button. |
labelRequired | string | — | Required accessible name. |
onClickRequired | MouseEventHandler<HTMLButtonElement> | — | Called when the action is activated. |
disabled | boolean | undefined | — | Disables the action independently. |
iconRequiredReactNodeNo default extracted.
Decorative icon displayed inside the button.
labelRequiredstringNo default extracted.
Required accessible name.
onClickRequiredMouseEventHandler<HTMLButtonElement>No default extracted.
Called when the action is activated.
disabledboolean | undefinedNo default extracted.
Disables the action independently.
Accessibility
- A visible label is associated with the input automatically.
- Helper/error text is connected through aria-describedby. Keep required and invalid feedback understandable without color.