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