⌘ K

Input

Accessible text entry with size, state, and appearance controls.

Interactive playground

LIVE PREVIEW

Props

Surface appearance.

Input height.

Placeholder text.

Controlled input value.

Disable editing.

Error message; empty clears the error.

Fill the container.

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 code

Input props

PropTypeDefaultDescription
shape"square" | "rounded""square"shape configuration.
iconLeftReact.ReactNodenoneicon left configuration.
iconRightReact.ReactNodenoneicon right configuration.
leftIconReact.ReactNodenoneleft icon configuration.
rightIconReact.ReactNodenoneright icon configuration.
errorstring | booleannoneError 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.
fullWidthbooleanfalseFill the container.
disabledbooleannoneDisable editing.
namestringnonename configuration.
typeHTMLInputTypeAttribute"text"type configuration.
valuestring | number | readonly string[]noneControlled input value.
defaultCheckedbooleannonedefault checked configuration.
defaultValuestring | number | readonly string[]noneInitial value for an uncontrolled component.
autoFocusbooleannoneauto focus configuration.
classNamestringnoneAdditional CSS classes.
idstringnoneid configuration.
styleCSSPropertiesnoneInline style overrides.
aria-invalidboolean | "false" | "true" | "grammar" | "spelling"noneIndicates the entered value does not conform to the format expected by the application.
aria-labelstringnoneDefines a string value that labels the current element.
childrenReactNodenoneContent rendered inside the component.
onFocusFocusEventHandler<HTMLInputElement>noneon focus configuration.
onBlurFocusEventHandler<HTMLInputElement>noneon blur configuration.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement>noneCalled when the input value changes.
onSubmitSubmitEventHandler<HTMLInputElement>noneCalled when the form is submitted.
onKeyDownKeyboardEventHandler<HTMLInputElement>noneon key down configuration.
onClickMouseEventHandler<HTMLInputElement>noneCalled when the control is activated.
onSelectReactEventHandler<HTMLInputElement>noneon select configuration.
checkedbooleannonechecked configuration.
maxLengthnumbernonemax length configuration.
placeholderstringnonePlaceholder text.
readOnlybooleannoneread only configuration.
requiredbooleannonerequired configuration.