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" />