Split input

Split input is a component to be used as an input component for otp and pin numbers.

Default

Storybook failed to load.

With six digits

Storybook failed to load.

With placeholder

Storybook failed to load.

Small

Storybook failed to load.

 

bpk-component-split-input

Backpack split-input component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkSplitInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-split-input';
                                                
                                                export default () => (
                                                  <BpkSplitInput
                                                    type={INPUT_TYPES.number}
                                                    name="otpInput"
                                                    id="otpInput"
                                                    label="otp input"
                                                    onChange={(e) => console.log('On Input Change')}
                                                    onSubmit={(e) => console.log('On Submit')}
                                                  />
                                                );

Props

Property PropType Required Default Value
id string true -
name string true -
type INPUT_TYPES (one of) false INPUT_TYPES.number
inputLength number false 4
placeholder string false -
label string true -
large bool false true
onChange bool true -
onSubmit bool true -