Skip to content

Input

Surface for accepting user input
import { Input, SearchSVG } from '@ensdomains/thorin'
<Input
icon={<MagnifyingGlassSimpleSVG />}
label="Wallet Address"
placeholder="0xA0Cf…251e"
prefix="hello"
suffix="world"
/>

Props
#

name
type
default
description
actionIcon
ReactNode
-
An icon that trails the input. By default is the clear icon.
alwaysShowAction
boolean
false
If true, will not hide the action or clear button when the input is empty
autoComplete
string
off
If the input should display a list of suggested words.
autoCorrect
string
-
If the imput should automatically fix spelling errors.
autoFocus
boolean
-
If the element should attempt to gain focus after it is rendered.
clearable
boolean
false
-
defaultValue
string | number
-
The initial value of the input. Useful for checking if the value of the input has changed.
description
ReactNode
-
Description text or react component.
disabled
boolean
-
Disables input from receiving user input.
error
ReactNode
-
Error text or a react component.
hideLabel
boolean
-
If true, hides the label and secondary label.
icon
ReactNode
-
An icon that leads the input.
iconWidth
"max" | "min" | "none" | "0" | "auto" | "px" | "0.25" | "0.5" | "0.75" | "1" | "1.25" | "1.5" | "1.75" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "7.5" | "8" | "8.5" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "18" | "20" | "22.5" | "24" | "26" | "28" | "30" | "32" | "36" | "40" | "44" | "45" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "112" | "128" | "144" | "168" | "192" | "224" | "256" | "288" | "320" | "1/4" | "1/3" | "1/2" | "2/3" | "3/4" | "full" | "fit" | "viewHeight" | "viewWidth"
-
A custom width for the icon component
id
string
-
The id attribute of the input element.
inputMode
"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"
-
A hint to the browser of what type of input the input will receive. Allows browsers to display the corresponding keyboard. Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
label*
Required
ReactNode
-
Label text or react component
labelSecondary
ReactNode
-
Secondary text or react component
maxLength
number
-
-
name
string
clear-button
The name attribute of the input element.
parentStyles
FlattenInterpolation<any>
-
Set of styles
placeholder
string
-
The placeholder attribute of the input element.
prefix
ReactNode
-
A string or component inserted in front of the input element.
prefixAs
"div"
-
Set the element type that wraps the prefix. Useful when you do not want clicks on the prefix to cause the input to focus
readOnly
boolean
-
If true, will set the Fields component to read only mode Sets the input in read only mode.
ref
Ref<HTMLInputElement>
-
-
required
boolean
-
Adds mark to label
reverse
boolean
-
Have lavel appear on the left of the form element.
showDot
boolean
-
If true, the value has been validated
size
"small" | "medium" | "large" | "extraLarge"
medium
Sets the height of the input element.
spellCheck
false | true | "true" | "false"
-
If the input will mark spelling errors in the text.
suffix
ReactNode
-
A string or component inserted at the end of the input.
suffixAs
"div"
-
Set the element type that wraps the suffix. Useful when you do not want clicks on the suffix to cause the input to focus
tabIndex
number
-
The tabindex attribute of the input element.
type
"text" | "email" | "datetime-local"
text
The data type the input.
units
string
-
Inserts text after the input text.
validated
boolean
-
If true, the input has changes
value
string | number
-
The value attribute of the input element.
width
any
-
A tokens space key value setting the width of the parent element.
onBlur
FocusEventHandler<HTMLInputElement>
-
A handler for blur events.
onChange
ChangeEventHandler<HTMLInputElement>
-
A handler for change events.
onFocus
FocusEventHandler<HTMLInputElement>
-
A handler for focus events.
onKeyDown
KeyboardEventHandler<HTMLInputElement>
-
A handler for keydown events.
onClickAction
() => void
-
A handler for clicking the action icon

Description
#

Error
#

Affixes
#

Show Dot
#

Disabled
#

Clearable
#

Sizes
#

Hide Label
#

onClickAction
#

alwaysShowAction
#

Read Only
#

Icon Width
#

Edit on GitHub