BaseInput Component

The BaseInput component is a styled input used as the foundation for custom inputs like AddressInput and EtherInput. It supports prefix and suffix elements, and handles error and disabled states.

Import

import { BaseInput } from "@scaffold-ui/components";

Props

Prop	Type	Default	Description
`value`	`string`	`undefined`	The current input value.
`onChange`	`(value: string) => void`	-	Callback fired when the input value changes.
`name`	`string`	-	Name attribute for the input element.
`placeholder`	`string`	-	Placeholder text displayed when the input is empty.
`error`	`boolean`	`false`	When `true`, applies error styling to the input border.
`disabled`	`boolean`	`false`	When `true`, disables the input and applies disabled styling.
`prefix`	`ReactNode`	-	Element rendered before the input (e.g., an icon).
`suffix`	`ReactNode`	-	Element rendered after the input (e.g., a button or icon).
`reFocus`	`boolean`	-	When `true`, auto-focuses the input and positions cursor at the end. Useful for programmatic focus.
`style`	`CSSProperties`	-	Custom inline styles for the input container.

Live Examples

Basic Usage

import React, { useState } from "react";
import { BaseInput } from "@scaffold-ui/components";
 
function BasicInput() {
  const [value, setValue] = useState("");
 
  return (
    <BaseInput
      value={value}
      onChange={setValue}
      placeholder="Enter your name"
    />
  );
}

With Prefix and Suffix

$USD

import React, { useState } from "react";
import { BaseInput } from "@scaffold-ui/components";
 
function CurrencyInput() {
  const [value, setValue] = useState("");
 
  return (
    <BaseInput
      value={value}
      onChange={setValue}
      placeholder="0.00"
      prefix={<span style={{ paddingLeft: 12 }}>lt;/span>}
      suffix={<span style={{ paddingRight: 12 }}>USD</span>}
    />
  );
}

Error State

Please enter a valid email

import React, { useState } from "react";
import { BaseInput } from "@scaffold-ui/components";
 
function InputWithValidation() {
  const [value, setValue] = useState("invalid-email");
  const hasError = value.length > 0 && !value.includes("@");
 
  return (
    <div>
      <BaseInput
        value={value}
        onChange={setValue}
        placeholder="Enter your email"
        error={hasError}
      />
      {hasError && <p style={{ color: "red" }}>Please enter a valid email</p>}
    </div>
  );
}

Disabled State

import React from "react";
import { BaseInput } from "@scaffold-ui/components";
 
function DisabledInput() {
  return (
    <BaseInput
      value="Read-only content"
      onChange={() => {}}
      disabled={true}
    />
  );
}