Input

Input is a lower-level constructs upon which all Grapes inputs are built.

View source code

autoComplete
```
string
```
The autocomplete value for the input element.
className
```
string
```
className for the element.
defaultValue
```
string | number
```
The default value (uncontrolled).
fit
```
"content" | "parent"
```
Whether the Input should fit its parent or content.
Default: content
id
```
string
```
The id of the Input.
inputMode
```
"decimal" | "numeric"
```
Type of data that might be entered, to display the appropriate virtual keyboard.
isDisabled
```
boolean
```
Whether the Input is disabled.
isInvalid
```
boolean
```
Whether the Input is invalid.
isReadOnly
```
boolean
```
Whether the Input should be read only.
key
```
Key
```
leftAddon
```
ReactNode
```
Left addon of the input.
maskOptions
```
CleaveOptions
```
@deprecated This props will be removed in a near futur
max
```
number
```
Maximum value in a number input.
maxLength
```
number
```
The maximum number of characters supported by the Input.
min
```
number
```
Minimum value in a number input.
name
```
string
```
The name of the Input, used when submitting an HTML form.
onBlur
```
FocusEventHandler<HTMLInputElement>
```
Handler that is called when the element loses focus.
onChange
```
ChangeEventHandler<HTMLInputElement>
```
Handler that is called when the value changes.
onCopy
```
ClipboardEventHandler<HTMLInputElement>
```
Handler that is called when the user copies text.
onFocus
```
FocusEventHandler<HTMLInputElement>
```
Handler that is called when the element receives focus.
onKeyDown
```
KeyboardEventHandler<HTMLInputElement>
```
Handler that is called when a key is pressed.
onPaste
```
ClipboardEventHandler<HTMLInputElement>
```
Handler that is called when the user pastes text.
onWheel
```
WheelEventHandler<HTMLInputElement>
```
Handler that is called when the mouse is rolled over the element.
pattern
```
string
```
Regular expression that the input's value must match in order for the value to pass
placeholder
```
string
```
Temporary text that occupies the Input when it is empty.
ref
```
Ref<HTMLButtonElement>
```
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
rightAddon
```
ReactNode
```
Right addon of the input.
step
```
string
```
The interval between numbers in an input of type number.
textAlign
```
"center" | "left" | "right"
```
Specifies how the text is aligned.
Default: left
type
```
string
```
The type of the HTML input element.
Default: text
value
```
string | number
```
The current value (controlled).
variant
```
"default" | "magicGradient"
```
The visual style of the input
Default: default