Changelog

Other links

V2 changelog | V3 migration guide

v3.0.0-alpha.28

🎉 New features

• [a11y] Improve IconButton and ImageButton accessibility
• [a11y] Improve UnitNumberInput accessibility
• New Table component to create tables from scratch (details)

🖌️ Style fixes

• Let Masthead take up the full width when stretch is enabled

🐞 Bug fixes

• Fix broken IMDA footer links

---

v3.0.0-alpha.27

🎉 New features

• Update Navbar and Footer to show IMDA resources for IMDA theme
• Add error icon to error messages across inputs, FileUpload and FileDownload
• [a11y] Improve UneditableSection accessibility
• [a11y] Improve RadioButton accessibility
• [BREAKING] [a11y] Add underline style by default to Typography.Link. This can be removed by setting underlineStyle="none"

🖌️ Style fixes

• Extend FileUpload mobile layout to md to resolve UI issues on smaller viewports

---

v3.0.0-alpha.26

🎉 New features

• Add primary colour variant for Pill and Tag
• Filter.Checkbox enhancements
  • Support nested options
  • Use showAsCheckboxInMobile to display checkbox list in mobile view
  • Use minimisableOptions to hide the "View more" button
• Add component token to control LoadingDotsSpinner colour
  • LifeSG theme defaults to brand-50
  • Other themes default to icon-primary
• [a11y] Improve accessibility of PhoneNumberInput and InputGroup list variant

🖌️ Style fixes

• Fix unreadable text in dark mode for read-only InputGroup and PhoneNumberInput

🐞 Bug fixes

• [a11y] Fix label association in FileUpload
• Avoid unmounting Filter in mobile
• Fix persistent scroll lock on iOS when Overlay/Modal is forcefully unmounted

---

v3.0.0-alpha.25

🎉 New features

• New IMDA theme
• New ModalV2 (details)
  • Provides a new compositional API that lets you combine pre-built content slots
  • Supports scrolling, compared to V1 where you had to manually handle content overflow
  • Comes with improved accessibility and focus trapping
• [WARNING] ModalAnimationDirection import has moved from Modal to ModalV2
• FullscreenImageCarousel now applies the bottom inset
• Enhancement to InputGroup list addon variant
  • Update styling to new card-based dropdown and V3 design
  • Fix dropdown getting cut off when it exceeds the parent container bounds
  • Support auto positioning
• PhoneNumberInput which is based on InputGroup also has the above enhancement applied

🖌️ Style fixes

• [BREAKING] Standardise all read-only inputs to align left
• Fix Sidenav item hover highlight persisting even after cursor leaves the item

---

v3.0.0-alpha.24

🎉 New features

• Add fullWidth prop to render UneditableSection without the default Layout.Content spacing

🖌️ Style fixes

• Update styling of OtpInput
• Add padding to DataTable action bar's floating state
• Restore scrollbar styles in DataTable and Select pickers

🐞 Bug fixes

• Sync Accordion state between parent and children. "Show/Hide all" button now properly reflects the actual state of all items

---

v3.0.0-alpha.23

🎉 New features

• [a11y] Improve Alert accessibility
• [a11y] Improve Drawer accessibility and add focus trapping
• [a11y] Improve CountdownTimer accessibility
• Add prefix option to OTPInput
• Support custom/safe area insets in Filter mobile mode

🖌️ Style fixes

• Fix some text styles not being applied

🐞 Bug fixes

• Resolve "A callback ref should not return a function" warning on React 18
• [WARNING] Add alternative scroll lock method on iOS for Overlay and Modal. As a side effect, this resolves a cosmetic issue where the page content is visible behind the status bar and tab bar on iOS 26.

---

v3.0.0-alpha.22

🎉 New features

• New Schedule component (details)
• Support custom clear button label in Filter
• Support custom/safe area insets in FullscreenImageCarousel
• Introduce onModalOpen to Filter
• [WARNING] Replace listStyleWidth with dropdownWidth to customise the width of the dropdowns in InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect
• [WARNING] Increase lg breakpoint from 1024px to 1200px

🖌️ Style fixes

• Disable active/hover states for Button, Checkbox, RadioButton and Toggle on devices where the primary pointer is not fine

---

v3.0.0-alpha.21

🎉 New features

• [a11y] Improve BoxContainer accessibility
• [a11y] Improve FileUpload accessibility
• [a11y] Improve Pagination accessibility
• [a11y] Improve Filter accessibility and add focus trapping in mobile modal

🐞 Bug fixes

• Gracefully handle missing icon for ButtonWithIcon
• Resolve unknown prop warnings on styled components by marking props as transient
• Fix issue where the polymorphic as prop was not respected by Typography
• Resolve act() warnings in unit tests

---

v3.0.0-alpha.20

🎉 New features

• Add React 19 support
• [BREAKING] Upgrade Styled Components to v6. Refer to the official docs for migration steps
• New shadow tokens
• Add SupportGoWhere resources in Navbar and Footer
• Support hiding of Footer logo
• Support custom fadeColor in Tab
• Support custom dropdown labels for InputSelect, MultiSelect, NestedSelect, NestedMultiSelect
  • [WARNING] The props noResultsDescription and searchPlaceholder are now under customLabels. The original props have been deprecated
• [WARNING] The Filter props headerTitle, toggleFilterButtonLabel, and doneButtonLabel are now under customLabels. The original props have been deprecated
• [BREAKING] Rename customLabel to customLabels in LinkList
• [a11y] Improve Toast accessibility and enhance keyboard navigation
• [a11y] Improve Pill accessibility
• [a11y] Improve ProgressIndicator accessibility

🐞 Bug fixes

• Fix unresponsive Toggle on iOS devices

Important

Known issues with styled-components v6

1. If you’re using pseudo-classes or pseudo-elements, make sure they they are prefixed with &. You can search by this regex \s+:?:[a-zA-Z0-9] in your codebase. For example:

- :hover { }
- ::before { }
+ &:hover { }
+ &::before { }

2. If you’re using jest-dom expect().toHaveStyle(), your tests may now fail due to extra whitespace, please update your assertions accordingly

---

v3.0.0-alpha.19

🎉 New features

• [a11y] Improve Footer accessibility
• Introduce onExpandCollapseChange prop, called when "Show all"/"Hide all" is toggled in Accordion

🐞 Bug fixes

• Fix DateRangeInput jumping to present month when the date is cleared due to user input or when selecting a start date after the end date

---

v3.0.0-alpha.18

🎉 New features

• New Menu component (details)
• Support custom label for Done button in Filter
• Add lazy-loading mode for LinkList
• [WARNING] Separate subtitle from label container in Form.Label to distinguish aria-labelledby and aria-describedby. This affects all inputs under the Form namespace
• [a11y] Improve labelling of Form.DateInput and Form.DateRangeInput
• Form.Input
  • [a11y] Improve labelling
  • [WARNING] The input now remains focusable even when disabled
• Footer
  • Add showResourceAddon prop to render additional content for MyLegacy
  • Switch to fluid layout instead of grid
• NotificationBanner
  • Support optional icon
  • [a11y] Improve accessibility
• LocalNav
  • [a11y] Improve accessibility
  • [a11y] Support keyboard navigation
  • [WARNING] The onNavItemSelect event now includes React.KeyboardEvent in addition to React.MouseEvent
• Toggle
  • [a11y] Improve accessibility
  • [a11y] Add keyboard focus style

🖌️ Style fixes

• Fix padding of LocalNav link
• Fix misaligned fade in Breadcrumb

---

v3.0.0-alpha.17

🎉 New features

• [WARNING] Increase sm-max breakpoint from 420px to 480px
• Adjust cutover for md and lg breakpoints to be consistent with other breakpoints
• New Badge component (details)
• New Avatar component (details)
• Reduced toggle min width to 5rem for Filter.Checkbox in mobile view
• [a11y] Make DataTable focusable to support scrolling for keyboard-only users
• [a11y] Improve Sidenav accessibility and enhance keyboard navigation

🖌️ Style fixes

• Update OneService colour tokens
• Fix info-40 and CCube brand-100 colour tokens

🐞 Bug fixes

• Ensure collapsed Filter.Item content is inaccessible
• Fix missing toggles in Filter.Checkbox when there are more than 5 but less than 3 rows in mobile view

---

v3.0.0-alpha.16

🎉 New features

• [a11y] Improve Breadcrumb, Checkbox, and Tag accessibility
• Button enhancements
  • Improve accessibility
  • Introduce focusableWhenDisabled prop
• Navbar enhancements
  • Improve accessibility
  • Support Escape key press to dismiss drawer
  • Support custom accessible labels for main header and mobile drawer
• [BREAKING] Pin SGDS Masthead to v3 and apply SGDS day and night themes

Important

Breaking changes for Masthead and Navbar users:

If your site has previously whitelisted the script url in the Content Security Policy headers, update it to match the new value

- https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/Masthead/index.js
+ https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js

• Accordion enhancements
  • Improve aria annotations
  • [BREAKING] Update Accordion.Item title to be wrapped in a <h3> and <button>
  • Support customisation of heading level

Important

Breaking changes for Accordion users:

If you are using a custom title, ensure that you are rendering it as a <span>

<Accordion.Item title={<Typography.XL inline>Item title</Typography.XL>}>
<Accordion.Item title={<span>Item title</span>}>
<Accordion.Item title={<h1 as="span">Item title</h1>}>

🖌️ Style fixes

• Apply border for components with drop shadows in dark mode:
  • Card
  • Navbar
  • SmartAppBanner
• Adjust spacing between Pagination elements

🐞 Bug fixes

• Fix Pagination tooltip position
• Fix incorrect V2_Text.Hyperlink.Small mapping in migrate-text codemod
• Fix missing styles for Masthead in dark mode, causing text to become unreadable

---

v3.0.0-alpha.15

🎉 New features

• [a11y] Improve DateInput and DateRangeInput accessibility and enhance keyboard navigation

🖌️ Style fixes

• Use colour token for secondary Button background
• Add missing radius token usage in components

🐞 Bug fixes

• Make collapsed Accordion.Item content inaccessible

---

v3.0.0-alpha.14

🎉 New features

• New SupportGoWhere theme
• Add component tokens for A11y Playground

🐞 Bug fixes

• Upgrade to fabric 6 to resolve error in ESignature when unsafe-eval is not enabled in CSP

---

v3.0.0-alpha.13

🎉 New features

• New SingpassButton (details)
• Dark theme (details)
  • New set of semantic colour tokens for dark mode
  • New DSThemeProvider to support automatic dark mode based on the user's preferences
  • Support light/dark mode-specific overrides for primitive and semantic colour tokens

🖌️ Style fixes

• Update minor ui elements to use colour tokens in the following:
  • Breadcrumb fade effect
  • Navbar background
  • Tabs fade effect
  • SelectHistogram text

🐞 Bug fixes

• Ensure Markup respects the baseTextColor prop
• Fix error in SelectHistogram

---

v3.0.0-alpha.12

🎉 New features

• Expose dropdownRootNode for components using Floating UI-based dropdowns:
  • DateInput, DateRangeInput
  • DateNavigator
  • InputSelect, MultiSelect, NestedSelect, NestedMultiSelect
  • SelectHistogram

🐞 Bug fixes

• Ensure search is case-insensitive in InputSelect and MultiSelect
• [a11y] Fix Chrome/Voiceover getting stuck on countdown in OtpInput

---

v3.0.0-alpha.11

🎉 New features

• New A11yPlayground theme
• [a11y] Improve OtpInput accessibility and enhance keyboard navigation
• [a11y] Improve Calendar accessibility and support keyboard navigation

🖌️ Style fixes

• Update Masthead to match new SGDS styling and align with current breakpoints
• Fix missing background for the current variant in Timeline

---

v3.0.0-alpha.10

🎉 New features

• Support custom width for Tab.Item tab selector
• Add maxSelectable prop to set a maximum number of options that can be selected in MultiSelect
• Support optional description under the default "No results found" display in InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect

🖌️ Style fixes

• Update PA font tokens

---

v3.0.0-alpha.9

Note

• Node 18 reached EOL on 30 Apr 2025. You're recommended to use Node 22 as the minimum version for development
• The pipeline has been upgraded to use Node 22

🎉 New features

• Introduce ThemedLoadingSpinner. Details
• Set up component tokens and introduce tokens for Button

🖌️ Style fixes

• Update LoadingSpinner to remove white background
• Fix incorrectly migrated breakpoints in Button and Timeline

---

v3.0.0-alpha.8

🎉 New features

• TimeTable enhancements
  • Add pending row cell status
  • Automatically block the entire row if it has no entries and rowMinTime and rowMaxTime are not set
  • Handle slots in 15 minute intervals, automatically rounding non-standard times
  • Update left border colour

🐞 Bug fixes

• Resolve React 18+ spread key warning in unit tests for InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect

---

v3.0.0-alpha.7

🖌️ Style fixes

• Update PA tokens

🐞 Bug fixes

• Add TextList to the top-level exports

---

v3.0.0-alpha.6

• Codemod enhancements
  • Migrate TextStyleHelper.getTextStyle() in migrate-text
  • Improve handling of imports
• Add placeholder OneService theme
• Update PA tokens

---

v3.0.0-alpha.5

Caution

V3 is in early alpha

• Disable common ligatures for PlusJakartaSans and Lato font
• Install jscodeshift before executing codemods
• Includes changes from v2.10.0-canary.6

---

v3.0.0-alpha.4

Caution

V3 is in early alpha

• Update PA theme
• Enable Typescript strict mode - this should not affect you as a consumer. However, you are highly recommended to enable strict mode (or minimally noImplicitAny) in your project for improved type safety when accessing design tokens.
• Includes changes from v2.10.0-canary.4

---

v3.0.0-alpha.3

Caution

V3 is in early alpha

• All components migrated to the new V3 design tokens
• Add PA theme
• Includes changes from v2.10.0-canary.2 and v2.10.0-canary.3

---

v3.0.0-alpha.2

Caution

V3 is in early alpha and is not ready for production use

• Migrate existing components to use the new V3 design tokens
• Fixes for codemods

---

v3.0.0-alpha.1

Caution

V3 is in early alpha and is not ready for production use

• Overhaul theming to use new standardised design tokens
• Deprecate components based on the old V2 design tokens
• New components based on the new V3 design tokens
• Codemods to support migration