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

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.