# Input 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. ## Component Instance Methods When using `Input` in your project, you may call the following methods on a rendered instance of the component. Use [`refs`](https://facebook.github.io/react/docs/refs-and-the-dom.html) 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 ## Installation ```bash npm i boundless-input --save ``` Then use it like: ```jsx /** @jsx createElement */ import { createElement, PureComponent } from 'react'; import Input from 'boundless-input'; export default class InputDemo extends PureComponent { state = { input: '', } handleChange = (e) => this.setState({ input: e.target.value }) render() { return (
hidePlaceholderOnFocus="false"
hidePlaceholderOnFocus="true"
"controlled" input
); } } ``` Input can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components: ```bash npm i boundless --save ``` the ES6 `import` statement then becomes like: ```js import { Input } from 'boundless'; ``` ## Props > Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Input). ### Required Props There are no required props. ### Optional Props - __`*`__ · any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes) Expects | Default Value --- | --- `any` | `n/a` - __`component`__ · overrides the HTML container tag Expects | Default Value --- | --- `string` | `'div'` - __`hidePlaceholderOnFocus`__ · triggers the placeholder to disappear when the input field is focused, reappears when the user has tabbed away or focus is moved Expects | Default Value --- | --- `bool` | `true` - __`inputProps`__ Expects | Default Value --- | --- `object` | `{ type: 'text' }` ## Reference Styles ### Stylus You can see what variables are available to override in [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl). ```stylus // Redefine any variables as desired, e.g: color-accent = royalblue // Bring in the component styles; they will be autoconfigured based on the above @require "node_modules/boundless-input/style" ``` ### CSS If desired, a precompiled plain CSS stylesheet is available for customization at `/build/style.css`, based on Boundless's [default variables](https://github.com/enigma-io/boundless/blob/master/variables.styl).