Skip to content
Casper UI

Input

const Input: React.ForwardRefExoticComponent<
  {
    isDisabled?: boolean;
    isReadOnly?: boolean;
    isRequired?: boolean;
    leftAddon?: React.ReactNode;
    leftElement?: React.ReactNode;
    rightAddon?: React.ReactNode;
    rightElement?: React.ReactNode;
    size?: ConditionalValue;
    variant?: "outline" | "ghost";
    visualState?: VisualInputState;
  } & {
    autoComplete?: React.HTMLInputAutoCompleteAttribute;
    autoFocus?: boolean;
    defaultValue?: string | number | readonly string[];
    id?: string;
    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
    name?: string;
    onBlur?: React.FocusEventHandler<HTMLInputElement>;
    onChange?: React.ChangeEventHandler<HTMLInputElement, HTMLInputElement>;
    onFocus?: React.FocusEventHandler<HTMLInputElement>;
    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
    onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
    pattern?: string;
    placeholder?: string;
    type?: React.HTMLInputTypeAttribute;
    value?: string | number | readonly string[];
  } & CustomChakraBoxProps &
    LayoutProps &
    MarginProps &
    PaddingProps &
    TypographyProps &
    React.RefAttributes<HTMLInputElement>
>;

Element that allows users enter single valued data.

See

Section titled “See”

Docs https://caspeco.github.io/casper-ui-library/components/input