- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Image Gallery
- Infinite scroll
- Info Banner
- Inset Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Navigation Tab Group
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Rating Bar
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Swap Button
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Search Input Summary
- Content
- Accessibility
- Contributing
- Localisation
Text input
Text inputs are used to capture textual information as well as numbers and passwords.
Default
Storybook failed to load.
Disabled
Storybook failed to load.
Validation
Storybook failed to load.
Storybook failed to load.
Clearable
Storybook failed to load.
Input types
Storybook failed to load.
Storybook failed to load.
Storybook failed to load.
Storybook failed to load.
Docked inputs
Storybook failed to load.
Multiline text input
Storybook failed to load.
bpk-component-input
Backpack input component.
Installation
Check the main Readme for a complete installation guide.
Usage
import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from '@skyscanner/backpack-web/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!')}
/>
);
withOpenEvents
The withOpenEvents higher-order component encapsulates input event handlers for opening popovers or modals.
import BpkInput, { withOpenEvents } from '@skyscanner/backpack-web/bpk-component-input';
import BpkPopover from '@skyscanner/backpack-web/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>
);
}
}
Props
Check out the full list of props on Skyscanner's design system documentation website.
Input props
Storybook failed to load.
bpk-component-textarea
Backpack textarea component.
Installation
Check the main Readme for a complete installation guide.
Usage
import BpkTextarea from '@skyscanner/backpack-web/bpk-component-textarea';
export default () => (
<BpkTextarea
id="textarea"
name="textarea"
value="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
);
Props
Check out the full list of props on Skyscanner's design system documentation website.
Textarea props
Storybook failed to load.
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Oct 2, 2023, 16:04