Input
Accessible text entry with size, state, and appearance controls.
Interactive playground
LIVE PREVIEW
Generated code
import { useState } from 'react';
import { Input } from '@vrum/ui';
export default function Demo() {
const [value, setValue] = useState("");
return (
<Input
variant={"default"}
inputSize={"md"}
placeholder={"Project name"}
value={value}
disabled={false}
error={""}
fullWidth={false}
aria-label={"Project name"}
onChange={(event) => setValue(event.target.value)}
/>
);
}Copy codeInput props
| Prop | Type | Default | Description |
|---|---|---|---|
shape | "square" | "rounded" | "square" | shape configuration. |
iconLeft | React.ReactNode | none | icon left configuration. |
iconRight | React.ReactNode | none | icon right configuration. |
leftIcon | React.ReactNode | none | left icon configuration. |
rightIcon | React.ReactNode | none | right icon configuration. |
error | string | boolean | none | Error message; empty clears the error. |
size | "sm" | "md" | "lg" | "2lg" | "3lg" | "md" | size configuration. |
inputSize | "sm" | "md" | "lg" | "2lg" | "3lg" | "md" | Input height. |
variant | "default" | "filled" | "default" | Surface appearance. |
fullWidth | boolean | false | Fill the container. |
disabled | boolean | none | Disable editing. |
name | string | none | name configuration. |
type | HTMLInputTypeAttribute | "text" | type configuration. |
value | string | number | readonly string[] | none | Controlled input value. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLInputElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLInputElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLInputElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLInputElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLInputElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLInputElement> | none | on select configuration. |
checked | boolean | none | checked configuration. |
maxLength | number | none | max length configuration. |
placeholder | string | none | Placeholder text. |
readOnly | boolean | none | read only configuration. |
required | boolean | none | required configuration. |