@berlitz/input

Input component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzInput from 'https://cdn.skypack.dev/@berlitz/input';
</script>

README

Input npm version

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