Skip to content

Latest commit

 

History

History
405 lines (264 loc) · 8.77 KB

input.md

File metadata and controls

405 lines (264 loc) · 8.77 KB
Raw

Input

Source

A text input that can be validated and decorated with different designs.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { Input } from 'chayns-components';

// ...

<Input {...} />

Props

The Input-component takes the following props:

Name Type Default Required
className string ''
onKeyUp function
onKeyDown function
onEnter function
onChange function
onBlur function
onFocus function
regExp RegExp
style { [key: string]: number | string } {}
placeholder string ''
value string | number
defaultValue string | number
invalid boolean false
type string 'text'
inputRef function
icon string | object
onIconClick function
wrapperRef function
dynamic boolean | number false
customProps object
id string
stopPropagation boolean false
required boolean false
disabled boolean false
clearIcon boolean false
design number Input.DEFAULT_DESIGN
iconLeft string | object
left ReactNode
right ReactNode
invalidMessage string
emptyValue string | number
autoComplete string 'off'

className

className?: string

A classname string that will be applied to the <input>-element

onKeyUp

onKeyUp?: function

A callback for the keyup-event on the input.

onKeyDown

onKeyDown?: function

A callback for the keyup-event on the input.

onEnter

onEnter?: function

A callback for when the users presses the Enter-key while the input is focused.

onChange

onChange?: function

Called when the inputs content was changed. If the regExp-prop is set, this callback receives a second argument indicating wether the input is valid or not.

onBlur

onBlur?: function

A callback for the blur-event on the input.

onFocus

onFocus?: function

A callback for the focus-event on the input.

regExp

regExp?: RegExp

A regular expression that will check if the input is valid. If the input is not valid, this component will show it to the user.

style

style?: { [key: string]: number | string }

A React style object that is applied to the <input>-element.

placeholder

placeholder?: string

An animated placeholder that is shown when the input is empty.

value

value?: string | number

The current value of the input field.

defaultValue

defaultValue?: string | number

The initial value of the input field. Has no effect when using the value-prop.

invalid

invalid?: boolean

Wether the input should be marked as invalid.

type

type?: string

The input type that is set on the <input>-element (e.g. text, password, etc.)

inputRef

inputRef?: function

A funtion that receives the reference to the <input>-element.

icon

icon?: string | object

An icon that will be shown on the right side of the input. Only applies when dynamic is true or the border-design is active.

onIconClick

onIconClick?: function

The onClick-callback for the icon.

wrapperRef

wrapperRef?: function

A function that will receive the reference to the wrapper element. This only has an effect if dynamic is true.

dynamic

dynamic?: boolean | number

When active the placeholder will not disappear on input but rather slide to the right of the input field to act more like a label. The option can also be Input.BOTTOM_DYNAMIC when the border-design is active.

customProps

customProps?: object

Any additional props that will be forwarded to the <input>-element.

id

id?: string

A HTML id that will be applied to the <input>-element.

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events to parent elements.

required

required?: boolean

Wether to mark an empty input as invalid.

disabled

disabled?: boolean

Disables any user interaction with the input and renders it with a disabled style.

clearIcon

clearIcon?: boolean

Wether to show a clear icon on the right side of the input when it is not empty.

design

design?: number

The design of the input. Use either Input.DEFAULT_DESIGN or Input.BORDER_DESIGN.

iconLeft

iconLeft?: string | object

An icon that will be shown on the left side of the input when the border-design is active.

left

left?: ReactNode

A string or ReactNode that will be rendered on the left side of the input when the border-design is active.

right

right?: ReactNode

A string or ReactNode that will be rendered on the right side of the input when the border-design is active.

invalidMessage

invalidMessage?: string

An error message that will be shown instead of the placeholder when the border-design is active and the dynamic-prop is set to Input.BOTTOM_DYNAMIC.

emptyValue

emptyValue?: string | number

Default value if nothing is typed into the input. Only for border design and not compatible with placeholder.

autoComplete

autoComplete?: string

Sets the autocomplete attribute