8x8 Oxygen - Input

Installation

$ yarn add @8x8/oxygen-input

$ npm install @8x8/oxygen-input

Usage

import Input from '@8x8/oxygen-input';

<Input type="text" />

Props

| Name | Type | Default | Description | | --------------- | -------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------- | | theme | Partial<InputTheme> | | Overrides applied on top of the light or dark settings resolved by OxygenProvider | | id | string | undefined | Define id attribute for input element | | name | string | undefined | Define name attribute for input element | | value | oneOfType(['string', 'number'] | undefined | Value/initial value of the input | | placeholder | string | '' | Render placeholder text inside input | | autoComplete | string | undefined | Define autocomplete attribute for Input | | autoFocus | bool | false | Define autofocus attribute for Input | | type | oneOf(['date', 'email', 'number', 'password', 'tel', 'text', 'url']) | 'text' | Define type of Input | | size | oneOf(['small', 'default', 'large']) | 'default' | Define Input size | | prefix | string | '' | Show text in front of input | | suffix | string | '' | Show text just after input | | iconLeft | oneOfType([func, node, element]) | null | Show icon inside input on the left side | | iconRight | oneOfType([func, node, element]) | null | Show icon inside input on the right side | | focus | bool | false | Tell when Input is focus | | fixed | bool | false | Render input as pure text | | hasError | bool | false | Tell when Input has error | | isDisabled | bool | false | Tell when Input is disabled | | isReadOnly | bool | false | Tell when Input is read only | | isRequired | bool | false | Tell when Input is required | | fullWidth | bool | true | Tell when Input is stretched | | max | number | undefined | Define maximum value for input type number | | min | number | undefined | Define minimum value for input type number | | maxLength | number | undefined | Define maximum length for input value | | onChange | func | noop | Callback on input value change | | onKeyUp | func | noop | Standard input onkeyup event | | onKeyDown | func | noop | Standard input onkeydown event | | forwardedRef | oneOfType([object, func]) | null | Forwarded ref | | inputRef | oneOfType([object, func]) | null | Ref for the input field | | testId | string | 'INPUT' | Input test id | | autoSuffixWidth | bool | false | Allows suffix to resize | | autoPrefixWidth | bool | false | Allows prefix to resize |