bpk-component-input-css
v6.1.11
Published
Backpack input component.
Downloads
105
Keywords
Readme
bpk-component-input
Backpack input component.
Installation
npm install bpk-component-input --save-dev
Usage
import React from 'react';
import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from 'bpk-component-input';
export default () => (
<BpkInput
id="origin"
type={INPUT_TYPES.text}
name="origin"
value="Edinburgh"
onChange={() => console.log('input changed!')}
placeholder="Country, city or airport"
clearButtonMode={CLEAR_BUTTON_MODES.whileEditing}
clearButtonLabel="Clear"
onClear={() => console.log('input cleared!')}
/>
);
Props
| Property | PropType | Required | Default Value | | ---------------- | -------------------------- | ------------------- | ------------------------ | | id | string | true | - | | name | string | true | - | | type | INPUT_TYPES (one of) | false | INPUT_TYPES.text | | value | string | true | - | | clearButtonMode | CLEAR_BUTTON_MODES (one of)| false | CLEAR_BUTTON_MODES.never | | clearButtonLabel | string | if clearable={true} | null | | dockedFirst | bool | false | false | | dockedLast | bool | false | false | | dockedMiddle | bool | false | false | | inputRef | func | false | null | | large | bool | false | false | | onClear | func | if clearable={true} | null | | valid | bool | false | null |
Additionally, all native <input />
attributes such as placeholder
and onChange
are supported.
Note: When clearButtonMode
is set to always
, validity icons will not appear.
withOpenEvents
The withOpenEvents
higher-order component encapsulates input event handlers for opening popovers or modals.
The onOpen
callback is called on the following events:
- click
- focus
- touchend
- keydown (Enter key)
- keyup (Space key)
You can still attach custom handlers for these events as they will still be called. All other key events are prevented.
It is important you pass the
isOpen
prop, as it is necessary to work around an IE bug.
| Property | PropType | Required | Default Value | | --------------- | -------------------- | --------- | ------------------- | | isOpen | bool | false | false | | onOpen | func | false | null | | hasTouchSupport | bool | false | (feature detection) |
import React from 'react';
import BpkInput, { withOpenEvents } from 'bpk-component-input';
import BpkPopover from 'bpk-component-popover';
const EnhancedInput = withOpenEvents(BpkInput);
export default () => {
constructor() {
super();
this.state = { isOpen: false };
}
onOpen = () => {
this.setState({ isOpen: true });
}
onClose = () => {
this.setState({ isOpen: false });
}
render() {
return (
<BpkPopover
id="popover"
target={
<EnhancedInput
id="input"
value="An input?"
isOpen={this.state.isOpen}
onOpen={this.onOpen}
onChange={() => null}
/>
}
onClose={this.onClose}
isOpen={this.state.isOpen}
label="Popover"
closeButtonText="Close"
>
A popover!
</BpkPopover>
);
}
}