Skip to content

Input

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

Props
#

name
type
default
description
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.
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.
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
labelPlacement
"top" | "bottom" | { error?: Placement | undefined; description?: Placement | undefined; }
-
Set the placement of the error and description. Does not affect inline mode.
labelRight
boolean
-
Have lavel appear on the right of the form element.
labelSecondary
ReactNode
-
Secondary text or react component
max
string | number
-
Sets the max value of number type inputs as well as a tag to the label and a mx button at the end of the input element.
maxLength
number
-
-
min
string | number
-
Sets the min value of number type inputs.
name
string
-
The name attribute of the input element.
padding
"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" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "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" | { prefix?: "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" | "8" | ... 42 more ... | undefined; suffix?: "max" | ... 65 more ... | undefined; input?: "max" | ... 65 more ... | undefined; }
-
Override the padding settings
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
-
Sets the input in read only mode.
ref
Ref<HTMLInputElement>
-
-
required
boolean
-
Adds mark to label
showDot
boolean
-
If true, the value has been validated
size
"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.
step
string | number
-
-
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
"number" | "text" | "email" | "date" | "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.

Disabled
#

Description
#

Error
#

Affixes
#

Units
#

Types
#

Sizes
#

Hide Label
#

Edit on GitHub