EtherInput

Displays an input field for ETH/USD amount, with an option to convert between ETH and USD.

EtherInput Example

Import

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

const [ethAmount, setEthAmount] = useState("");

<EtherInput onValueChange={({ valueInEth, valueInUsd, displayUsdMode }) => setEthAmount(valueInEth)} />

Prop	Type	Default Value	Description
defaultValue (optional)	`string`	`undefined`	Initial value for the input (in ETH).
defaultUsdMode (optional)	`boolean`	`false`	When set to `true`, the input starts in USD mode instead of ETH.
onValueChange (optional)	`(value: { valueInEth: string; valueInUsd: string; displayUsdMode: boolean }) => void`	`undefined`	Callback fired when the value or display mode changes. Provides both ETH and USD values.
placeholder (optional)	`string`	`undefined`	The string that will be rendered when there is no input value.
name (optional)	`string`	`undefined`	Helps identify the data being sent if EtherInput is submitted into a form.
disabled (optional)	`boolean`	`false`	When set to `true`, changes input background color and border to have disabled styling.
style (optional)	`CSSProperties`	`undefined`	Custom CSS styles to apply to the component.