View Source

Input

An input control with placeholder emulation for non-supporting platforms.

Input abstracts away the cross-platform differences of placeholder styling and behaviors, for example: Internet Explorer dismisses native placeholders on input focus and other platforms do not. This component ensures that text input controls will feel and behave similarly on more devices.

Installation#

npm i --save boundless-input

Input can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Input } from 'boundless';

Demo

hidePlaceholderOnFocus="false"
Start typing and I disappear!
hidePlaceholderOnFocus="true"
Focus on me and I disappear!
"controlled" input
Focus on me and I disappear!
Show Implementation

Component Instance Methods#

When using Input in your project, you may call the following methods on a rendered instance of the component. Use refs to get the instance.

  • getValue() returns the current value of the input field

  • setValue(string) programmatically set the input value; useful for clearing out the input in "uncontrolled" mode -- note that digging into the internals and setting the refs.field.value = '' directly will not trigger events and messes up the internal state of the component

Props#

Required Props#

There are no required props.

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

component
Expects
string
Default Value
'div'

overrides the HTML container tag

hidePlaceholderOnFocus
Expects
bool
Default Value
true

triggers the placeholder to disappear when the input field is focused, reappears when the user has tabbed away or focus is moved

inputProps
Expects
object
Default Value
{
    type: 'text',
}
*
Expects
any

any React-supported attribute

defaultValue
Expects
string
onBlur
Expects
function
onFocus
Expects
function
onChange
Expects
function
placeholder
Expects
string
type
Expects
string
value
Expects
string