- 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
Chip
Chips let travellers enter information, filter options, make choices, and ultimately take action.
Communicate purpose
Chips are flexible components that can be used to show a drop-down list, open a model or show a bottom sheet, which can be designed for either selecting one or multiple items at once. Annotate the design so it’s clear what the action or purpose is for development.
Support dynamic changes
Assistive technology users need to be updated when something visually changes on screen. For example, we must make it clear when a user removes a dismissible chip, or if a chip filters out some content, then the new total should be announced.
Preferably show the updated total visually to avoid extra cognitive effort and to update the user instantly.
Disabled chips
Although disabled chips don’t need to pass minimum contrast checks, they’re still difficult to read until they are enabled. Consider whether missing the information harms the experience, and look at other solutions if so.
Focus order on dismiss
After dismissing a chip, it may be unclear where the focus should move. Work with the engineer to make sure the experience matches the expectations. It’s recommended that the focus shifts to the next element on the page but judge the experience for each case.
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Mar 6, 2023, 10:55