Input

Simple wrapper around the native input component with some smarts.

Installation

yarn add @berlitz/input

Props

| Argument | Type | Required | Notes | | --------------- | ------ | -------- | --------------------------------------------------------------------------------- | | ariaDescribedby | String | | | | autocomplete | String | | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete | | button | Bool | | Will add an arrow button to the right of the input, which accepts an onClick prop | | defaultValue | String | | | | disabled | Bool | | | | ghost | Bool | | alternate style with only a bottom border | | id | String | | | | invalid | Bool | | | | mask | String | | Mask pattern https://www.npmjs.com/package/react-input-mask | | maskChar | String | | Mask character, typically " " or "_" | | name | String | X | | | onBlur | Func | | | | onChange | Func | | | | onClick | Func | | onClick handler to attach to the optional button prop | | onKeyDown | Func | | | | onKeyPress | Func | | | | onKeyUp | Func | | | | pattern | String | | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern | | placeholder | String | | | | required | Bool | | | | title | String | | https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-title | | type | String | X | | | value | String | | |

Usage

import Input from '@berlitz/input'
const MyApp = () => <Input name="cool_input" type="text" />