@westpac/ui 1.3.2 → 1.5.0

package/src/components/icon/components/star-rate-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function StarRateIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Star Rate',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/stars-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function StarsIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Stars',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/stopwatch-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function StopwatchIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Stopwatch',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/stroller-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function StrollerIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Stroller',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/success-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function SuccessIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Success',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/super-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function SuperIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Super',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/switch-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function SwitchIcon({ 'aria-label': ariaLabel = 'Switch', copyrightYear = '2025', ...props }: IconProps) {
+export function SwitchIcon({ 'aria-label': ariaLabel = 'Switch', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/tablet-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TabletIcon({ 'aria-label': ariaLabel = 'Tablet', copyrightYear = '2025', ...props }: IconProps) {
+export function TabletIcon({ 'aria-label': ariaLabel = 'Tablet', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/tag-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function TagIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Tag',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/takeout-coffee-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function TakeoutCoffeeIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Takeout Coffee',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/takeout-food-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function TakeoutFoodIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Takeout Food',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/target-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TargetIcon({ 'aria-label': ariaLabel = 'Target', copyrightYear = '2025', ...props }: IconProps) {
+export function TargetIcon({ 'aria-label': ariaLabel = 'Target', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/telephone-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TelephoneIcon({ 'aria-label': ariaLabel = 'Telephone', copyrightYear = '2025', ...props }: IconProps) {
+export function TelephoneIcon({ 'aria-label': ariaLabel = 'Telephone', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/text-bold-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TextBoldIcon({ 'aria-label': ariaLabel = 'Text Bold', copyrightYear = '2025', ...props }: IconProps) {
+export function TextBoldIcon({ 'aria-label': ariaLabel = 'Text Bold', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/text-increase-icon.tsx

@@ -5,7 +5,7 @@ import { type IconProps } from '../icon.types.js';
 
 export function TextIncreaseIcon({
   'aria-label': ariaLabel = 'Text Increase',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/text-large-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TextLargeIcon({ 'aria-label': ariaLabel = 'Text Large', copyrightYear = '2025', ...props }: IconProps) {
+export function TextLargeIcon({ 'aria-label': ariaLabel = 'Text Large', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/thumb-down-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function ThumbDownIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Thumb Down',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/thumb-up-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function ThumbUpIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Thumb Up',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/tick-circle-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function TickCircleIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Tick Circle',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/tick-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TickIcon({ 'aria-label': ariaLabel = 'Tick', copyrightYear = '2025', ...props }: IconProps) {
+export function TickIcon({ 'aria-label': ariaLabel = 'Tick', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path d="M8.6 15.6L4.4 11.4L3 12.8L8.6 18.4L20.6 6.4L19.2 5L8.6 15.6Z" fill="currentColor" />

package/src/components/icon/components/tiles-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function TilesIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Tiles',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/transfer-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function TransferIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Transfer',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/transport-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function TransportIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Transport',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/travel-explore-icon.tsx

@@ -5,7 +5,7 @@ import { type IconProps } from '../icon.types.js';
 
 export function TravelExploreIcon({
   'aria-label': ariaLabel = 'Travel Explore',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/tune-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TuneIcon({ 'aria-label': ariaLabel = 'Tune', copyrightYear = '2025', ...props }: IconProps) {
+export function TuneIcon({ 'aria-label': ariaLabel = 'Tune', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/twitter-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function TwitterIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Twitter',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/umbrella-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function UmbrellaIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Umbrella',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/unpin-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function UnpinIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Unpin',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/upload-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function UploadIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Upload',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/verified-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function VerifiedIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Verified',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/video-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function VideoIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Video',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/visibility-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function VisibilityIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Visibility',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/visibility-off-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function VisibilityOffIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Visibility Off',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/voice-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function VoiceIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Voice',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/voiceover-on-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function VoiceoverOnIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Voiceover On',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/volume-off-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function VolumeOffIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Volume Off',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/volume-on-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function VolumeOnIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Volume On',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/walk-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function WalkIcon({ 'aria-label': ariaLabel = 'Walk', copyrightYear = '2025', ...props }: IconProps) {
+export function WalkIcon({ 'aria-label': ariaLabel = 'Walk', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/wallet-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function WalletIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Wallet',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/warning-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function WarningIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Warning',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/watch-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function WatchIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Watch',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/wearable-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function WearableIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Wearable',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/wheelchair-icon.tsx

@@ -5,7 +5,7 @@ import { type IconProps } from '../icon.types.js';
 
 export function WheelchairIcon({
   'aria-label': ariaLabel = 'Wheelchair',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/windows-new-icon.tsx

@@ -5,7 +5,7 @@ import { type IconProps } from '../icon.types.js';
 
 export function WindowsNewIcon({
   'aria-label': ariaLabel = 'Windows New',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/wine-glass-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function WineGlassIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Wine Glass',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/word-file-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function WordFileIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Word File',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/write-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function WriteIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Write',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/x-icon.tsx

@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrightYear = '2025', ...props }: IconProps) {
+export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       {look === 'filled' ? (

package/src/components/icon/components/yammer-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function YammerIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Yammer',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/youtube-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function YoutubeIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Youtube',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/zip-file-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function ZipFileIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Zip File',
-  copyrightYear = '2025',
+  copyrightYear = '2026',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/index.ts

@@ -6,19 +6,19 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
-export { ArrowBackIcon } from './components/arrow-back-icon.js';
 export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
-export { ArrowDownIcon } from './components/arrow-down-icon.js';
+export { ArrowBackIcon } from './components/arrow-back-icon.js';
 export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
+export { ArrowDownIcon } from './components/arrow-down-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
-export { ArrowForwardIcon } from './components/arrow-forward-icon.js';
 export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
+export { ArrowForwardIcon } from './components/arrow-forward-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
 export { ArrowThreadReplyIcon } from './components/arrow-thread-reply-icon.js';
-export { ArrowUpIcon } from './components/arrow-up-icon.js';
 export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
+export { ArrowUpIcon } from './components/arrow-up-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';
 export { AustraliaIcon } from './components/australia-icon.js';
@@ -28,6 +28,8 @@ export { BankIcon } from './components/bank-icon.js';
 export { BarChartDownIcon } from './components/bar-chart-down-icon.js';
 export { BarChartIcon } from './components/bar-chart-icon.js';
 export { BarbellIcon } from './components/barbell-icon.js';
+export { BathIcon } from './components/bath-icon.js';
+export { BedIcon } from './components/bed-icon.js';
 export { BookIcon } from './components/book-icon.js';
 export { BpayIcon } from './components/bpay-icon.js';
 export { BriefcaseIcon } from './components/briefcase-icon.js';
@@ -96,6 +98,7 @@ export { FilterIcon } from './components/filter-icon.js';
 export { FingerprintIcon } from './components/fingerprint-icon.js';
 export { FirstAidCaseIcon } from './components/first-aid-case-icon.js';
 export { FirstAidIcon } from './components/first-aid-icon.js';
+export { FlagIcon } from './components/flag-icon.js';
 export { FormatColorIcon } from './components/format-color-icon.js';
 export { FullscreenExitIcon } from './components/fullscreen-exit-icon.js';
 export { FullscreenIcon } from './components/fullscreen-icon.js';
@@ -162,6 +165,7 @@ export { PackageDeliveryIcon } from './components/package-delivery-icon.js';
 export { PadlockIcon } from './components/padlock-icon.js';
 export { PadlockOpenIcon } from './components/padlock-open-icon.js';
 export { PadlockTickIcon } from './components/padlock-tick-icon.js';
+export { PasskeyIcon } from './components/passkey-icon.js';
 export { PauseCircleIcon } from './components/pause-circle-icon.js';
 export { PauseIcon } from './components/pause-icon.js';
 export { PawIcon } from './components/paw-icon.js';

package/src/components/selector/components/selector-button-group/selector-button-group.component.tsx

@@ -25,28 +25,35 @@ export function SelectorButtonGroup({
   errorMessage,
   description,
   value = '',
+  onChange,
   isDisabled,
   ...props
 }: SelectorButtonGroupProps) {
+  const isControlled = onChange !== undefined;
+  const onChangeCallback = onChange as ((value: string) => void) | undefined;
   const [selected, setSelected] = useState(value);
   const breakpoint = useBreakpoint();
   const resolvedOrientation = resolveResponsiveVariant(orientation, breakpoint);
 
   const handleChange = useCallback(
     (id: string) => {
-      setSelected(id);
+      if (onChangeCallback) {
+        onChangeCallback(id);
+      } else {
+        setSelected(id);
+      }
     },
-    [setSelected],
+    [onChangeCallback, setSelected],
   );
 
   const state: SelectorButtonGroupContextState = useMemo(
     () => ({
-      value: selected,
+      value: isControlled ? (value ?? '') : selected,
       onClick: (id: string) => handleChange(id),
       validationState: errorMessage ? 'invalid' : 'valid',
       isDisabled,
     }),
-    [errorMessage, handleChange, isDisabled, selected],
+    [errorMessage, handleChange, isControlled, isDisabled, selected, value],
   );
 
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({

package/src/components/selector/components/selector-button-group/selector-button-group.types.ts

@@ -22,9 +22,14 @@ export type SelectorButtonGroupProps = {
    */
   tag?: keyof JSX.IntrinsicElements;
   /**
-   * Key to set as default value
+   * Key to set as default value (uncontrolled) or currently selected value (controlled)
    */
   value?: string;
+  /**
+   * Called when selection changes. Providing this prop makes the component controlled.
+   * Pass an empty string to clear the selection.
+   */
+  onChange?: (value: string) => void;
 } & AriaFieldProps &
   Omit<HTMLAttributes<Element>, 'onChange'>;