Skip to main content


Simple building block for creating an input which comes with basic default styles (colors, rounded borders).

InputBase Example


import { InputBase } from "~~/components/scaffold-eth";


const [url, setUrl] = useState<string>();

<InputBase name="url" placeholder="url" value={url} onChange={setUrl} />;


PropTypeDefault ValueDescription
valuestringundefinedThe data that your input will show.
onChangefunctionundefinedA callback invoked when the data in the input changes.
placeholder (optional)stringundefinedThe string that will be rendered before input data has been entered.
name (optional)stringundefinedHelps identify the data being sent if InputBase is submitted into a form.
error (optional)booleanfalseWhen set to true, changes input border to have error styling.
disabled (optional)booleanfalseWhen set to true, changes input background color and border to have disabled styling.