Input
Surface for accepting user input
import { Input } from '@kalidao/reality'
name | type | default |
|---|---|---|
autoComplete | string | - |
autoCorrect | string | - |
autoFocus | boolean | - |
defaultValue | string | number | - |
description | ReactNode | - |
disabled | boolean | - |
error | ReactNode | - |
hideLabel | boolean | - |
id | string | - |
inputMode | "email" | "text" | "none" | "tel" | "url" | "numeric" | "decimal" | "search" | - |
label* Required | ReactNode | - |
labelSecondary | ReactNode | - |
max | string | number | - |
maxLength | number | - |
min | string | number | - |
name | string | - |
placeholder | string | - |
prefix | ReactNode | - |
readOnly | boolean | - |
ref | Ref<HTMLInputElement> | - |
required | boolean | - |
spellCheck | Booleanish | - |
step | string | number | - |
suffix | ReactNode | - |
tabIndex | number | - |
textTransform | "capitalize" | "lowercase" | "uppercase" | - |
type | "number" | "email" | "text" | text |
units | string | - |
value | string | number | - |
width | ConditionalStyle<Values<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; screenSm: 640; ... 49 more ...; none: CSSVarFunction; }, { ...; }>> | - |
onBlur | FocusEventHandler<HTMLInputElement> | - |
onChange | (event: ChangeEvent<HTMLInputElement>) => void | - |
onFocus | FocusEventHandler<HTMLInputElement> | - |
onKeyDown | KeyboardEventHandler<HTMLInputElement> | - |