CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use
  • When not to use
  • Best practice guidelines
  • Variations
  • Accessibility
  • Security
  • Component inspiration and uplift
  • User research on this component
  • Known issues
  • More research needed
  • Help improve this component
  • Resources
  • References
  • Changelog
  • Contact us

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Atoms

Chip

The Chip component provides users with a compact, visually distinct element for filtering, categorizing, or selecting information within an interface.

When to use

Use the Chip component when you need to:

  • Allow users to filter search results or content categories

  • Show selected options in a multi-select interface

  • Display tags or labels that categorise content

  • Create a compact interface for selection of multiple options

  • Provide visual feedback for active filters or selections

When not to use

Do not use the Chip component when:

  • Users need to take complex actions that require more context or a larger clickable area

  • A single selection from multiple options is required (use radio buttons instead)

  • The action is a primary action on the page (use buttons instead)

  • The selection would be better represented as a checkbox within a form

  • Space is extremely limited and text labels would be too truncated to be meaningful


Best practice guidelines

  • Clear labelling: Keep text in chips concise and descriptive to clearly communicate their purpose and content.

  • Visual distinction: Ensure chips are visually distinguishable from other interactive elements like buttons through shape, border radius, and other visual attributes.

  • State indication: Provide clear visual indication of a chip's state (selected, hover, default) through colour and styling.

  • Touch-friendly: Design chips to be easily tappable on touch devices, following minimum touch target size guidelines.

  • Consistent interaction: Maintain consistent interaction patterns across chip implementations—if one chip toggles on click, all similar chips should behave the same way.

  • Appropriate spacing: Include adequate spacing between multiple chips to prevent accidental selection.

  • Responsive design: Ensure chips adapt appropriately to different screen sizes and device types.

  • Accessibility: Include appropriate ARIA attributes for chips that act as controls or selections.

  • Group semantically: Group related chips together visually and semantically in the markup.

Variations

  • Default

  • Hover

  • Selected

  • Selected Hover

Each variation is available for both desktop and mobile interfaces.


Accessibility

Based on the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Chip component (referred to as "Filter Chip" in the assessments) has undergone accessibility testing against WCAG 2.2 standards.

Summary of the most recent accessibility test results:

WCAG 2.2 Criteria
Status
Details

Most WCAG 2.2 criteria

Pass

Including contrast requirements, keyboard accessibility, and proper state indications

Criterion 2.5.8 Target Size (Minimum) (Level AA)

Fail

The size of the target for pointer inputs does not consistently meet the minimum 24 by 24 CSS pixels requirement

For detailed information on compliance, refer to the full accessibility assessment.

Security

No specific security considerations have been identified for this component. Standard web security practices should be followed when implementing this component.

Component inspiration and uplift

The Chip atomic element has been modelled after the Tags component in the Australian Government Design System (AGDS). As documented in the CivicTheme Australian Government GOLD Design System Compliance Statements, this component has been uplifted in the following ways:

  • CivicTheme uses several styles of tags based on where they are on the website. Chips, specifically, are used within the Filter component, as a method to narrow down the results of an article's categories.

  • CivicTheme's Chips are fully-rounded in their appearance and do not use text underlines, instead adopting a button-like appearance.

  • Interactive states change in both border and background colours.

  • An 'X' (remove) icon appears alongside an active Chip to remove the active filter attribute.

This approach was influenced by Victoria's Ripple design system, which presents Chips with fully-rounded styling to clearly distinguish them from regular buttons and other interactive elements.


User research on this component

★★★☆☆ Confidence rating = Moderate (Some testing conducted, but findings not comprehensive)

Limited user research has been conducted specifically on the Chip component in CivicTheme. Based on the available information, testing has shown that users generally understand the filtering and selection capabilities of chips, but some usability challenges exist particularly around target size on mobile devices.

This assessment is based on general design research rather than extensive testing with end users for this specific component implementation. More research would be beneficial to improve the component's usability across different contexts.

Known issues

  • Target size: As noted in the accessibility assessment, the Chip component fails to meet WCAG 2.2 criterion 2.5.8 for minimum target size, which could impact users with motor control difficulties.

  • Small text truncation: On mobile devices, longer text in chips may become truncated, potentially obscuring important information.

  • Contrast in selected state: Some users may have difficulty distinguishing between selected and unselected states if they have colour perception limitations.

More research needed

Research is needed in the following areas:

  • Optimal target sizes for touch interactions across different devices

  • Text truncation handling and best practices for longer labels

  • User understanding of the 'X' icon for removal and potential alternatives

  • Performance across different assistive technologies

  • Effectiveness of the current visual design in communicating state changes

If you have conducted user research that addresses any of these gaps, please consider contributing your findings to help improve this component.

Help improve this component

To help make this component useful and up-to-date, you can:

  • Contribute to our Chip component discussion on GitHub

  • Submit your user research findings to help improve the Chip component

  • Propose a change to address any of the known issues

  • Help improve the component's accessibility, particularly regarding target size


Resources

  • Storybook

  • GitHub

References

  • Web Content Accessibility Guidelines (WCAG) 2.2

  • Australian Government Design System (former AGDS)

  • Digital Service Standard (DSS): The component supports criteria 3 "Leave no one behind" by providing accessible filtering mechanisms when properly implemented.

Changelog

Version
Release Date
Changes

1.8.0

July 2024

• Renamed from "Chips Filter" to "Chip"

• Recategorized from Molecules to Atoms

• Updated styling to improve visual clarity

1.7.0

March 2024

• Updated for WCAG 2.2 compliance

• Added improved state management

Contact us

PreviousButtonNextContent link

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

Nielsen Norman Group:

If you have a question about the CivicTheme design system or need our help, visit the page for guidance.

contributing section
Figma
Best Practices for Using UI Pattern Libraries
Getting Help