From 2e52abbee1307e00298404795a1c235438a5e345 Mon Sep 17 00:00:00 2001
From: Dobricean Ioan Dorian <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 11 Sep 2025 13:30:24 +0300
Subject: [PATCH 1/9] multiselect widget

---
 .../MultiSelect/MultiSelect.quanta.tsx        | 48 ++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/MultiSelect/MultiSelect.quanta.tsx b/packages/components/src/components/MultiSelect/MultiSelect.quanta.tsx
index fff39fcbf2b..488aa2e4ec4 100644
--- a/packages/components/src/components/MultiSelect/MultiSelect.quanta.tsx
+++ b/packages/components/src/components/MultiSelect/MultiSelect.quanta.tsx
@@ -10,6 +10,8 @@ import {
   TagGroup,
   TagList,
   Tag,
+  FieldError,
+  type ValidationResult,
 } from 'react-aria-components';
 import { Description, Label } from '../Field/Field.quanta';
 import { useListData } from 'react-stately';
@@ -32,9 +34,16 @@ export interface MultiSelectProps<T extends object> {
   placeholder?: string;
   label?: string;
   description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
   creatable?: boolean;
+  onChange?: (selectedItems: Array<T>) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
   onItemInserted?: (key: Key) => void;
   onItemCleared?: (key: Key) => void;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
   renderEmptyState?: (inputValue: string) => React.ReactNode;
 }
 
@@ -44,11 +53,18 @@ export function MultiSelect({
   items,
   className = '',
   description,
+  errorMessage,
+  onChange,
+  onBlur,
+  onFocus,
   onItemCleared,
   onItemInserted,
   renderEmptyState,
   selectedItems,
   creatable = true,
+  isDisabled = false,
+  isReadOnly = false,
+  isRequired = false,
   ...props
 }: MultiSelectProps<Option>) {
   const triggerRef = useRef<HTMLDivElement | null>(null);
@@ -80,20 +96,21 @@ export function MultiSelect({
   const onRemove = useCallback(
     (keys: Set<Key>) => {
       const key = keys.values().next().value;
-      if (key) {
+      if (key && !isDisabled && !isReadOnly) {
         selectedItems.remove(key);
         setFieldState({
           inputValue: '',
           selectedKey: null,
         });
         onItemCleared?.(key);
+        onChange?.(selectedItems.items);
       }
     },
-    [selectedItems, onItemCleared],
+    [selectedItems, onItemCleared, onChange, isDisabled, isReadOnly],
   );
 
   const onSelectionChange = (id: Key | null) => {
-    if (!id) {
+    if (!id || isDisabled || isReadOnly) {
       return;
     }
 
@@ -110,6 +127,7 @@ export function MultiSelect({
         selectedKey: id,
       });
       onItemInserted?.(id);
+      onChange?.(selectedItems.items);
     }
 
     accessibleList.setFilterText('');
@@ -140,6 +158,8 @@ export function MultiSelect({
   }, []);
 
   const onCreateTag = useCallback(() => {
+    if (isDisabled || isReadOnly) return;
+
     const inputValue = fieldState.inputValue.trim();
     const id = inputValue.toLocaleLowerCase();
 
@@ -159,11 +179,20 @@ export function MultiSelect({
 
       accessibleList.append(item);
       selectedItems.append(item);
+      onChange?.(selectedItems.items);
     }
-  }, [fieldState.inputValue, accessibleList, selectedItems, setFieldState]);
+  }, [
+    fieldState.inputValue,
+    accessibleList,
+    selectedItems,
+    setFieldState,
+    onChange,
+    isDisabled,
+    isReadOnly,
+  ]);
 
   const popLast = useCallback(() => {
-    if (selectedItems.items.length === 0) {
+    if (selectedItems.items.length === 0 || isDisabled || isReadOnly) {
       return;
     }
 
@@ -172,13 +201,14 @@ export function MultiSelect({
     if (endKey) {
       selectedItems.remove(endKey.id);
       onItemCleared?.(endKey.id);
+      onChange?.(selectedItems.items);
     }
 
     setFieldState({
       inputValue: '',
       selectedKey: null,
     });
-  }, [selectedItems, onItemCleared]);
+  }, [selectedItems, onItemCleared, onChange, isDisabled, isReadOnly]);
 
   const onKeyDownCapture = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -243,13 +273,18 @@ export function MultiSelect({
           >
             <Input
               placeholder={placeholder}
+              disabled={isDisabled}
+              readOnly={isReadOnly}
+              required={isRequired}
               onBlur={() => {
                 setFieldState({
                   inputValue: '',
                   selectedKey: null,
                 });
                 accessibleList.setFilterText('');
+                onBlur?.();
               }}
+              onFocus={onFocus}
               onKeyDownCapture={onKeyDownCapture}
               className="min-w-0 flex-1 bg-white px-2 py-1.5 text-sm text-gray-800 outline-0 disabled:text-gray-200"
             />
@@ -317,6 +352,7 @@ export function MultiSelect({
         </div>
       </div>
       {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
     </div>
   );
 }

From 5be249512b11eccf52e03795fb330fa2a940967e Mon Sep 17 00:00:00 2001
From: Dobricean Ioan Dorian <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 11 Sep 2025 14:53:18 +0300
Subject: [PATCH 2/9] select widget

---
 .../Select/Select.quanta.stories.tsx          | 137 +++++++++++++++
 .../src/components/Select/Select.quanta.tsx   | 161 ++++++++++++++++++
 2 files changed, 298 insertions(+)
 create mode 100644 packages/components/src/components/Select/Select.quanta.stories.tsx
 create mode 100644 packages/components/src/components/Select/Select.quanta.tsx

diff --git a/packages/components/src/components/Select/Select.quanta.stories.tsx b/packages/components/src/components/Select/Select.quanta.stories.tsx
new file mode 100644
index 00000000000..f6de7adf311
--- /dev/null
+++ b/packages/components/src/components/Select/Select.quanta.stories.tsx
@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { Select, type Option, type SelectProps } from './Select.quanta';
+import { type Key } from 'react-aria-components';
+
+const fruits: Option[] = [
+  { id: 'apple', name: 'Apple' },
+  { id: 'banana', name: 'Banana' },
+  { id: 'orange', name: 'Orange' },
+  { id: 'strawberry', name: 'Strawberry' },
+  { id: 'blueberry', name: 'Blueberry' },
+  { id: 'raspberry', name: 'Raspberry' },
+  { id: 'grape', name: 'Grape' },
+  { id: 'watermelon', name: 'Watermelon' },
+  { id: 'pineapple', name: 'Pineapple' },
+  { id: 'mango', name: 'Mango' },
+];
+
+export default {
+  title: 'Quanta/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: false,
+      description: 'The list of available options to display in the dropdown.',
+    },
+    label: { control: 'text', description: 'The label of the select field' },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text displayed when no option is selected.',
+    },
+    description: {
+      control: 'text',
+      description: 'Additional helper text displayed below the field.',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message to display below the field.',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the field is disabled.',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether the field is required.',
+    },
+    onChange: {
+      action: 'selection-changed',
+      description: 'Callback fired when selection changes.',
+    },
+  },
+};
+
+export const Default = (args: SelectProps<Option>) => {
+  return (
+    <div className="w-full max-w-[300px]">
+      <Select {...args} />
+    </div>
+  );
+};
+
+Default.args = {
+  label: 'Favorite Fruit',
+  placeholder: 'Choose a fruit...',
+  items: fruits,
+  onChange: (value: Key | null) => console.log('Selected:', value),
+} as Partial<SelectProps<Option>>;
+
+export const WithDefaultValue = Default.bind({});
+
+WithDefaultValue.args = {
+  ...Default.args,
+  label: 'Fruit with Default',
+  defaultSelectedKey: 'banana',
+};
+
+export const Disabled = Default.bind({});
+
+Disabled.args = {
+  ...Default.args,
+  label: 'Disabled Select',
+  isDisabled: true,
+  defaultSelectedKey: 'apple',
+};
+
+export const Required = Default.bind({});
+
+Required.args = {
+  ...Default.args,
+  label: 'Required Fruit',
+  description: 'This field is required',
+  isRequired: true,
+};
+
+export const WithError = Default.bind({});
+
+WithError.args = {
+  ...Default.args,
+  label: 'Select with Error',
+  errorMessage: 'Please select a fruit',
+};
+
+export const Controlled = (args: SelectProps<Option>) => {
+  const [selectedKey, setSelectedKey] = useState<Key | null>('orange');
+
+  const handleChange = (value: Key | null) => {
+    setSelectedKey(value);
+  };
+
+  return (
+    <div className="w-full max-w-[300px] space-y-4">
+      <Select {...args} selectedKey={selectedKey} onChange={handleChange} />
+      <div className="text-sm">
+        <strong>Currently Selected:</strong>
+        <div className="mt-1 rounded border bg-gray-50 p-2">
+          {selectedKey ? (
+            <span className="inline-block rounded bg-blue-100 px-2 py-1 text-xs text-blue-800">
+              {fruits.find((f) => f.id === selectedKey)?.name}
+            </span>
+          ) : (
+            <span className="text-gray-500">Nothing selected</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Controlled.args = {
+  ...Default.args,
+  label: 'Controlled Select',
+  description: 'This demonstrates controlled state with onChange',
+};
diff --git a/packages/components/src/components/Select/Select.quanta.tsx b/packages/components/src/components/Select/Select.quanta.tsx
new file mode 100644
index 00000000000..65fe20a63b0
--- /dev/null
+++ b/packages/components/src/components/Select/Select.quanta.tsx
@@ -0,0 +1,161 @@
+import React from 'react';
+import { Description, FieldError, Label } from '../Field/Field.quanta';
+import { ChevrondownIcon } from '../../components/icons/ChevrondownIcon';
+import { CheckboxIcon } from '../../components/icons/CheckboxIcon';
+import { twMerge } from 'tailwind-merge';
+
+import type {
+  ListBoxProps,
+  PopoverProps,
+  SelectProps as AriaSelectProps,
+  ValidationResult,
+  Key,
+} from 'react-aria-components';
+import {
+  Button,
+  Select as AriaSelect,
+  SelectValue,
+  composeRenderProps,
+  Popover,
+  Dialog,
+  ListBoxItem,
+  ListBox,
+} from 'react-aria-components';
+
+export type Option = {
+  id: Key;
+  name: string;
+};
+
+interface SelectTriggerProps {
+  className?: string;
+  placeholder?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+const SelectTrigger = ({
+  className,
+  placeholder,
+  errorMessage,
+}: SelectTriggerProps) => {
+  return (
+    <Button
+      className={twMerge(
+        'flex h-10 w-full cursor-default items-center justify-between gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-gray-500 focus:ring-2 focus:ring-gray-400 disabled:opacity-50',
+        errorMessage
+          ? 'border-red-500 focus:border-red-500 focus:ring-red-400'
+          : 'border-gray-300 focus:border-gray-500 focus:ring-gray-400',
+        className,
+      )}
+    >
+      <SelectValue
+        className="flex-1 truncate text-left data-[placeholder]:text-gray-500"
+        placeholder={placeholder}
+      />
+      <ChevrondownIcon className="h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+    </Button>
+  );
+};
+
+interface SelectListProps<T extends Option>
+  extends Omit<ListBoxProps<T>, 'layout' | 'orientation'>,
+    Pick<PopoverProps, 'placement'> {
+  items?: Iterable<T>;
+  className?: string;
+}
+
+const SelectList = <T extends Option>({
+  items,
+  className,
+  placement = 'bottom',
+  ...props
+}: SelectListProps<T>) => {
+  return (
+    <Popover
+      className="z-50 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg"
+      placement={placement}
+    >
+      <Dialog role="dialog">
+        <ListBox
+          className={twMerge('max-h-60 overflow-auto', className)}
+          items={items}
+          {...props}
+        >
+          {(item) => (
+            <ListBoxItem
+              key={item.id}
+              id={item.id}
+              textValue={item.name}
+              className="cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none data-[focused]:bg-gray-100"
+            >
+              {({ isSelected }) => (
+                <div className="flex w-full items-center">
+                  <span className="flex-1">{item.name}</span>
+                  {isSelected && (
+                    <CheckboxIcon className="ml-2 h-4 w-4 text-gray-600" />
+                  )}
+                </div>
+              )}
+            </ListBoxItem>
+          )}
+        </ListBox>
+      </Dialog>
+    </Popover>
+  );
+};
+
+export interface SelectProps<T extends Option>
+  extends Omit<AriaSelectProps<T>, 'children'> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  placeholder?: string;
+  items?: Iterable<T>;
+  className?: string;
+  listBoxClassName?: string;
+  placement?: PopoverProps['placement'];
+  onChange?: (value: Key | null) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+}
+
+export function Select<T extends Option>({
+  label,
+  description,
+  errorMessage,
+  placeholder = 'Select an option...',
+  className,
+  items,
+  listBoxClassName,
+  placement = 'bottom',
+  onChange,
+  onBlur,
+  onFocus,
+  ...props
+}: SelectProps<T>) {
+  return (
+    <AriaSelect
+      {...props}
+      onSelectionChange={onChange}
+      className={twMerge('group flex w-full flex-col gap-1.5', className)}
+    >
+      {label && <Label>{label}</Label>}
+      <SelectTrigger placeholder={placeholder} errorMessage={errorMessage} />
+      <SelectList
+        items={items}
+        className={listBoxClassName}
+        placement={placement}
+        onBlur={onBlur}
+        onFocus={onFocus}
+      />
+      {description && <Description>{description}</Description>}
+      {errorMessage && (
+        <div className="text-sm text-red-600">
+          {typeof errorMessage === 'function'
+            ? errorMessage({} as ValidationResult)
+            : errorMessage}
+        </div>
+      )}
+    </AriaSelect>
+  );
+}

From 37dda2c87fed36853044881051d2e0dfcfe8b18b Mon Sep 17 00:00:00 2001
From: Dobricean Ioan Dorian <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 11 Sep 2025 14:54:36 +0300
Subject: [PATCH 3/9] select widget

---
 .../MultiSelect.quanta.stories.tsx            | 396 ++++++++++++++----
 1 file changed, 312 insertions(+), 84 deletions(-)

diff --git a/packages/components/src/components/MultiSelect/MultiSelect.quanta.stories.tsx b/packages/components/src/components/MultiSelect/MultiSelect.quanta.stories.tsx
index a7ec83b95f1..fff39fcbf2b 100644
--- a/packages/components/src/components/MultiSelect/MultiSelect.quanta.stories.tsx
+++ b/packages/components/src/components/MultiSelect/MultiSelect.quanta.stories.tsx
@@ -1,94 +1,322 @@
-import React, { useState } from 'react';
+import React, { useRef, useState, useEffect, useCallback, useId } from 'react';
 import {
-  MultiSelect,
-  type Option,
-  type MultiSelectProps,
-} from './MultiSelect.quanta';
+  Button,
+  ComboBox,
+  Input,
+  ListBox,
+  Popover,
+  type Key,
+  ListBoxItem,
+  TagGroup,
+  TagList,
+  Tag,
+} from 'react-aria-components';
+import { Description, Label } from '../Field/Field.quanta';
 import { useListData } from 'react-stately';
-import { type Key } from 'react-aria-components';
-
-const items: Option[] = [
-  { id: 'apple', name: 'Apple' },
-  { id: 'banana', name: 'Banana' },
-  { id: 'orange', name: 'Orange' },
-  { id: 'strawberry', name: 'Strawberry' },
-  { id: 'blueberry', name: 'Blueberry' },
-  { id: 'raspberry', name: 'Raspberry' },
-  { id: 'blackberry', name: 'Blackberry' },
-  { id: 'grape', name: 'Grape' },
-  { id: 'watermelon', name: 'Watermelon' },
-  { id: 'pineapple', name: 'Pineapple' },
-  { id: 'mango', name: 'Mango' },
-  { id: 'peach', name: 'Peach' },
-];
-
-export default {
-  title: 'Quanta/MultiSelect',
-  component: MultiSelect,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    items: {
-      control: false,
-      description:
-        'The list of available options to display in the dropdown. Each item should have an `id` and a `name`.',
-    },
-    selectedItems: {
-      control: 'false',
-      description:
-        'A list manager initialized using `useListData({ initialItems })`. Used to control selected items statefully.',
-    },
-    label: { control: 'text', description: 'The label of the tag field' },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text displayed when no items are selected.',
-    },
-    description: {
-      control: 'text',
-      description: 'Additional helper text displayed below the field.',
-    },
-    onItemInserted: {
-      action: 'item-inserted',
-      description:
-        'Callback fired when an item is selected. Receives the item `id` as a `Key`.',
-    },
-    onItemCleared: {
-      action: 'item-cleared',
-      description:
-        'Callback fired when an item is removed. Receives the item `id` as a `Key`.',
-    },
-    creatable: {
-      control: 'boolean',
-      description: 'Whether the user can create new options not in the list.',
-    },
-  },
+import type { ListData } from 'react-stately';
+import { useFilter } from 'react-aria';
+import { twMerge } from 'tailwind-merge';
+
+import { CloseIcon as Close } from '../../components/icons/CloseIcon';
+import { ChevrondownIcon } from '../../components/icons/ChevrondownIcon';
+
+export type Option = {
+  id: Key;
+  name: string;
 };
 
-export const Default = (args: MultiSelectProps<Option>) => {
-  const selectedItems = useListData({
-    initialItems: [items[0], items[2]],
+export interface MultiSelectProps<T extends object> {
+  items: Array<T>;
+  selectedItems: ListData<T>;
+  className?: string;
+  placeholder?: string;
+  label?: string;
+  description?: string;
+  creatable?: boolean;
+  onItemInserted?: (key: Key) => void;
+  onItemCleared?: (key: Key) => void;
+  renderEmptyState?: (inputValue: string) => React.ReactNode;
+}
+
+export function MultiSelect({
+  label,
+  placeholder = 'Select items...',
+  items,
+  className = '',
+  description,
+  onItemCleared,
+  onItemInserted,
+  renderEmptyState,
+  selectedItems,
+  creatable = true,
+  ...props
+}: MultiSelectProps<Option>) {
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const tagGroupIdentifier = useId();
+  const selectedKeys = selectedItems?.items.map((i: Option) => i.id);
+  const [width, setWidth] = useState(0);
+  const { contains } = useFilter({ sensitivity: 'base' });
+
+  const filter = useCallback(
+    (item: Option, filterText: string) => {
+      return !selectedKeys.includes(item.id) && contains(item.name, filterText);
+    },
+    [contains, selectedKeys],
+  );
+
+  const accessibleList = useListData({
+    initialItems: items,
+    filter,
   });
 
-  return (
-    <div className="w-full max-w-[400px]">
-      <MultiSelect {...args} selectedItems={selectedItems} />
-    </div>
+  const [fieldState, setFieldState] = useState<{
+    selectedKey: Key | null;
+    inputValue: string;
+  }>({
+    selectedKey: null,
+    inputValue: '',
+  });
+
+  const onRemove = useCallback(
+    (keys: Set<Key>) => {
+      const key = keys.values().next().value;
+      if (key) {
+        selectedItems.remove(key);
+        setFieldState({
+          inputValue: '',
+          selectedKey: null,
+        });
+        onItemCleared?.(key);
+      }
+    },
+    [selectedItems, onItemCleared],
   );
-};
 
-Default.args = {
-  label: 'Fruits',
-  items: items,
-  onItemInserted: (id: Key) => console.log('Item inserted:', id),
-  onItemCleared: (id: Key) => console.log('Item removed:', id),
-} as Partial<MultiSelectProps<Option>>;
+  const onSelectionChange = (id: Key | null) => {
+    if (!id) {
+      return;
+    }
 
-export const NonCreatable = Default.bind({});
+    const item = accessibleList.getItem(id);
 
-NonCreatable.args = {
-  ...Default.args,
-  creatable: false,
-  label: 'Non-Creatable Fruits',
-};
+    if (!item) {
+      return;
+    }
+
+    if (!selectedKeys.includes(id)) {
+      selectedItems.append(item);
+      setFieldState({
+        inputValue: '',
+        selectedKey: id,
+      });
+      onItemInserted?.(id);
+    }
+
+    accessibleList.setFilterText('');
+  };
+  const onInputChange = (value: string) => {
+    setFieldState((prev) => ({
+      inputValue: value,
+      selectedKey: value === '' ? null : prev.selectedKey,
+    }));
+
+    accessibleList.setFilterText(value);
+  };
+
+  useEffect(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWidth(entry.target.clientWidth);
+      }
+    });
+
+    observer.observe(trigger);
+    return () => {
+      observer.unobserve(trigger);
+    };
+  }, []);
+
+  const onCreateTag = useCallback(() => {
+    const inputValue = fieldState.inputValue.trim();
+    const id = inputValue.toLocaleLowerCase();
+
+    let item = accessibleList.getItem(id);
+
+    if (!item) {
+      item = {
+        id: id,
+        name: inputValue,
+      };
+
+      setFieldState((prev) => ({
+        ...prev,
+        inputValue: '',
+        selectedKey: id,
+      }));
+
+      accessibleList.append(item);
+      selectedItems.append(item);
+    }
+  }, [fieldState.inputValue, accessibleList, selectedItems, setFieldState]);
+
+  const popLast = useCallback(() => {
+    if (selectedItems.items.length === 0) {
+      return;
+    }
+
+    const endKey = selectedItems.items[selectedItems.items.length - 1];
+
+    if (endKey) {
+      selectedItems.remove(endKey.id);
+      onItemCleared?.(endKey.id);
+    }
+
+    setFieldState({
+      inputValue: '',
+      selectedKey: null,
+    });
+  }, [selectedItems, onItemCleared]);
+
+  const onKeyDownCapture = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Backspace' && fieldState.inputValue === '') {
+        popLast();
+      }
+
+      if (
+        e.key === 'Enter' &&
+        fieldState.inputValue &&
+        creatable &&
+        accessibleList.items.length === 0
+      ) {
+        onCreateTag();
+      }
+    },
+    [popLast, fieldState.inputValue, onCreateTag, creatable, accessibleList],
+  );
+
+  return (
+    <div className={twMerge('w-full', className)}>
+      {label && <Label>{label}</Label>}
+      <div ref={triggerRef} className="relative">
+        <div className="relative flex min-h-10 w-full flex-wrap items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-1.5 shadow-sm focus-within:border-gray-500 focus-within:ring-2 focus-within:ring-gray-400">
+          <TagGroup
+            id={tagGroupIdentifier}
+            aria-label="Selected items"
+            onRemove={onRemove}
+          >
+            <TagList
+              items={selectedItems.items}
+              className="flex flex-wrap items-center gap-1"
+            >
+              {(item: Option) => (
+                <Tag
+                  className="inline-flex items-center gap-x-1.5 rounded-md bg-gray-200 px-2 py-0.5 text-sm text-gray-800"
+                  textValue={item.name}
+                  id={item.id}
+                >
+                  {item.name}
+                  <Button
+                    slot="remove"
+                    className="grid cursor-pointer place-content-center text-gray-500 hover:bg-gray-600 hover:text-gray-300 focus:bg-gray-600 focus:outline-none"
+                    type="button"
+                  >
+                    <Close size="xs" />
+                  </Button>
+                </Tag>
+              )}
+            </TagList>
+          </TagGroup>
+          <ComboBox
+            {...props}
+            allowsEmptyCollection
+            aria-label="Available items"
+            items={accessibleList.items}
+            selectedKey={fieldState.selectedKey}
+            inputValue={fieldState.inputValue}
+            onSelectionChange={onSelectionChange}
+            onInputChange={onInputChange}
+            className="relative flex flex-1"
+          >
+            <Input
+              placeholder={placeholder}
+              onBlur={() => {
+                setFieldState({
+                  inputValue: '',
+                  selectedKey: null,
+                });
+                accessibleList.setFilterText('');
+              }}
+              onKeyDownCapture={onKeyDownCapture}
+              className="min-w-0 flex-1 bg-white px-2 py-1.5 text-sm text-gray-800 outline-0 disabled:text-gray-200"
+            />
+
+            <Button
+              className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 focus:outline-none"
+              type="button"
+            >
+              <ChevrondownIcon />
+            </Button>
+
+            <Popover
+              isNonModal
+              trigger="ComboBox"
+              triggerRef={triggerRef}
+              style={{ width: `${width}px` }}
+              className="max-w-none overflow-hidden"
+            >
+              <ListBox
+                selectionMode="multiple"
+                className="rounded-md border border-gray-200 bg-white p-1 shadow-lg"
+                disallowEmptySelection={false}
+                renderEmptyState={
+                  renderEmptyState
+                    ? () => renderEmptyState(fieldState.inputValue)
+                    : () => (
+                        <div
+                          className="block cursor-pointer rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
+                          role="button"
+                          onMouseDown={(e) => {
+                            e.stopPropagation();
+                            if (fieldState.inputValue && creatable) {
+                              onCreateTag();
+                            }
+                          }}
+                          tabIndex={0}
+                        >
+                          {fieldState.inputValue ? (
+                            <>
+                              {creatable ? 'Create:' : 'No results found for:'}{' '}
+                              <strong className="font-medium text-gray-900">
+                                {fieldState.inputValue}
+                              </strong>
+                            </>
+                          ) : (
+                            'No options'
+                          )}
+                        </div>
+                      )
+                }
+              >
+                {(item: Option) => (
+                  <ListBoxItem
+                    key={item.id}
+                    id={item.id}
+                    textValue={item.name}
+                    className="cursor-pointer rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none data-[focused]:bg-gray-100"
+                  >
+                    {item.name}
+                  </ListBoxItem>
+                )}
+              </ListBox>
+            </Popover>
+          </ComboBox>
+        </div>
+      </div>
+      {description && <Description>{description}</Description>}
+    </div>
+  );
+}

From 0e2ee51199dd6d4c49355f305f1fe3ebdf8e1a00 Mon Sep 17 00:00:00 2001
From: Dobricean Ioan Dorian <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 11 Sep 2025 14:55:14 +0300
Subject: [PATCH 4/9] select widget

---
 .../MultiSelect/MultiSelect.quanta.tsx        | 48 +++----------------
 1 file changed, 6 insertions(+), 42 deletions(-)

diff --git a/packages/components/src/components/MultiSelect/MultiSelect.quanta.tsx b/packages/components/src/components/MultiSelect/MultiSelect.quanta.tsx
index 488aa2e4ec4..fff39fcbf2b 100644
--- a/packages/components/src/components/MultiSelect/MultiSelect.quanta.tsx
+++ b/packages/components/src/components/MultiSelect/MultiSelect.quanta.tsx
@@ -10,8 +10,6 @@ import {
   TagGroup,
   TagList,
   Tag,
-  FieldError,
-  type ValidationResult,
 } from 'react-aria-components';
 import { Description, Label } from '../Field/Field.quanta';
 import { useListData } from 'react-stately';
@@ -34,16 +32,9 @@ export interface MultiSelectProps<T extends object> {
   placeholder?: string;
   label?: string;
   description?: string;
-  errorMessage?: string | ((validation: ValidationResult) => string);
   creatable?: boolean;
-  onChange?: (selectedItems: Array<T>) => void;
-  onBlur?: () => void;
-  onFocus?: () => void;
   onItemInserted?: (key: Key) => void;
   onItemCleared?: (key: Key) => void;
-  isDisabled?: boolean;
-  isReadOnly?: boolean;
-  isRequired?: boolean;
   renderEmptyState?: (inputValue: string) => React.ReactNode;
 }
 
@@ -53,18 +44,11 @@ export function MultiSelect({
   items,
   className = '',
   description,
-  errorMessage,
-  onChange,
-  onBlur,
-  onFocus,
   onItemCleared,
   onItemInserted,
   renderEmptyState,
   selectedItems,
   creatable = true,
-  isDisabled = false,
-  isReadOnly = false,
-  isRequired = false,
   ...props
 }: MultiSelectProps<Option>) {
   const triggerRef = useRef<HTMLDivElement | null>(null);
@@ -96,21 +80,20 @@ export function MultiSelect({
   const onRemove = useCallback(
     (keys: Set<Key>) => {
       const key = keys.values().next().value;
-      if (key && !isDisabled && !isReadOnly) {
+      if (key) {
         selectedItems.remove(key);
         setFieldState({
           inputValue: '',
           selectedKey: null,
         });
         onItemCleared?.(key);
-        onChange?.(selectedItems.items);
       }
     },
-    [selectedItems, onItemCleared, onChange, isDisabled, isReadOnly],
+    [selectedItems, onItemCleared],
   );
 
   const onSelectionChange = (id: Key | null) => {
-    if (!id || isDisabled || isReadOnly) {
+    if (!id) {
       return;
     }
 
@@ -127,7 +110,6 @@ export function MultiSelect({
         selectedKey: id,
       });
       onItemInserted?.(id);
-      onChange?.(selectedItems.items);
     }
 
     accessibleList.setFilterText('');
@@ -158,8 +140,6 @@ export function MultiSelect({
   }, []);
 
   const onCreateTag = useCallback(() => {
-    if (isDisabled || isReadOnly) return;
-
     const inputValue = fieldState.inputValue.trim();
     const id = inputValue.toLocaleLowerCase();
 
@@ -179,20 +159,11 @@ export function MultiSelect({
 
       accessibleList.append(item);
       selectedItems.append(item);
-      onChange?.(selectedItems.items);
     }
-  }, [
-    fieldState.inputValue,
-    accessibleList,
-    selectedItems,
-    setFieldState,
-    onChange,
-    isDisabled,
-    isReadOnly,
-  ]);
+  }, [fieldState.inputValue, accessibleList, selectedItems, setFieldState]);
 
   const popLast = useCallback(() => {
-    if (selectedItems.items.length === 0 || isDisabled || isReadOnly) {
+    if (selectedItems.items.length === 0) {
       return;
     }
 
@@ -201,14 +172,13 @@ export function MultiSelect({
     if (endKey) {
       selectedItems.remove(endKey.id);
       onItemCleared?.(endKey.id);
-      onChange?.(selectedItems.items);
     }
 
     setFieldState({
       inputValue: '',
       selectedKey: null,
     });
-  }, [selectedItems, onItemCleared, onChange, isDisabled, isReadOnly]);
+  }, [selectedItems, onItemCleared]);
 
   const onKeyDownCapture = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -273,18 +243,13 @@ export function MultiSelect({
           >
             <Input
               placeholder={placeholder}
-              disabled={isDisabled}
-              readOnly={isReadOnly}
-              required={isRequired}
               onBlur={() => {
                 setFieldState({
                   inputValue: '',
                   selectedKey: null,
                 });
                 accessibleList.setFilterText('');
-                onBlur?.();
               }}
-              onFocus={onFocus}
               onKeyDownCapture={onKeyDownCapture}
               className="min-w-0 flex-1 bg-white px-2 py-1.5 text-sm text-gray-800 outline-0 disabled:text-gray-200"
             />
@@ -352,7 +317,6 @@ export function MultiSelect({
         </div>
       </div>
       {description && <Description>{description}</Description>}
-      <FieldError>{errorMessage}</FieldError>
     </div>
   );
 }

From 8578c4374edc015bc9797aeba72d4575c1ab831f Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 11 Sep 2025 14:56:50 +0300
Subject: [PATCH 5/9] Update MultiSelect.quanta.stories.tsx

---
 .../MultiSelect.quanta.stories.tsx            | 396 ++++--------------
 1 file changed, 84 insertions(+), 312 deletions(-)

diff --git a/packages/components/src/components/MultiSelect/MultiSelect.quanta.stories.tsx b/packages/components/src/components/MultiSelect/MultiSelect.quanta.stories.tsx
index fff39fcbf2b..a7ec83b95f1 100644
--- a/packages/components/src/components/MultiSelect/MultiSelect.quanta.stories.tsx
+++ b/packages/components/src/components/MultiSelect/MultiSelect.quanta.stories.tsx
@@ -1,322 +1,94 @@
-import React, { useRef, useState, useEffect, useCallback, useId } from 'react';
+import React, { useState } from 'react';
 import {
-  Button,
-  ComboBox,
-  Input,
-  ListBox,
-  Popover,
-  type Key,
-  ListBoxItem,
-  TagGroup,
-  TagList,
-  Tag,
-} from 'react-aria-components';
-import { Description, Label } from '../Field/Field.quanta';
+  MultiSelect,
+  type Option,
+  type MultiSelectProps,
+} from './MultiSelect.quanta';
 import { useListData } from 'react-stately';
-import type { ListData } from 'react-stately';
-import { useFilter } from 'react-aria';
-import { twMerge } from 'tailwind-merge';
-
-import { CloseIcon as Close } from '../../components/icons/CloseIcon';
-import { ChevrondownIcon } from '../../components/icons/ChevrondownIcon';
-
-export type Option = {
-  id: Key;
-  name: string;
-};
-
-export interface MultiSelectProps<T extends object> {
-  items: Array<T>;
-  selectedItems: ListData<T>;
-  className?: string;
-  placeholder?: string;
-  label?: string;
-  description?: string;
-  creatable?: boolean;
-  onItemInserted?: (key: Key) => void;
-  onItemCleared?: (key: Key) => void;
-  renderEmptyState?: (inputValue: string) => React.ReactNode;
-}
-
-export function MultiSelect({
-  label,
-  placeholder = 'Select items...',
-  items,
-  className = '',
-  description,
-  onItemCleared,
-  onItemInserted,
-  renderEmptyState,
-  selectedItems,
-  creatable = true,
-  ...props
-}: MultiSelectProps<Option>) {
-  const triggerRef = useRef<HTMLDivElement | null>(null);
-  const tagGroupIdentifier = useId();
-  const selectedKeys = selectedItems?.items.map((i: Option) => i.id);
-  const [width, setWidth] = useState(0);
-  const { contains } = useFilter({ sensitivity: 'base' });
-
-  const filter = useCallback(
-    (item: Option, filterText: string) => {
-      return !selectedKeys.includes(item.id) && contains(item.name, filterText);
+import { type Key } from 'react-aria-components';
+
+const items: Option[] = [
+  { id: 'apple', name: 'Apple' },
+  { id: 'banana', name: 'Banana' },
+  { id: 'orange', name: 'Orange' },
+  { id: 'strawberry', name: 'Strawberry' },
+  { id: 'blueberry', name: 'Blueberry' },
+  { id: 'raspberry', name: 'Raspberry' },
+  { id: 'blackberry', name: 'Blackberry' },
+  { id: 'grape', name: 'Grape' },
+  { id: 'watermelon', name: 'Watermelon' },
+  { id: 'pineapple', name: 'Pineapple' },
+  { id: 'mango', name: 'Mango' },
+  { id: 'peach', name: 'Peach' },
+];
+
+export default {
+  title: 'Quanta/MultiSelect',
+  component: MultiSelect,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: false,
+      description:
+        'The list of available options to display in the dropdown. Each item should have an `id` and a `name`.',
     },
-    [contains, selectedKeys],
-  );
-
-  const accessibleList = useListData({
-    initialItems: items,
-    filter,
-  });
-
-  const [fieldState, setFieldState] = useState<{
-    selectedKey: Key | null;
-    inputValue: string;
-  }>({
-    selectedKey: null,
-    inputValue: '',
-  });
-
-  const onRemove = useCallback(
-    (keys: Set<Key>) => {
-      const key = keys.values().next().value;
-      if (key) {
-        selectedItems.remove(key);
-        setFieldState({
-          inputValue: '',
-          selectedKey: null,
-        });
-        onItemCleared?.(key);
-      }
+    selectedItems: {
+      control: 'false',
+      description:
+        'A list manager initialized using `useListData({ initialItems })`. Used to control selected items statefully.',
     },
-    [selectedItems, onItemCleared],
-  );
-
-  const onSelectionChange = (id: Key | null) => {
-    if (!id) {
-      return;
-    }
-
-    const item = accessibleList.getItem(id);
-
-    if (!item) {
-      return;
-    }
-
-    if (!selectedKeys.includes(id)) {
-      selectedItems.append(item);
-      setFieldState({
-        inputValue: '',
-        selectedKey: id,
-      });
-      onItemInserted?.(id);
-    }
-
-    accessibleList.setFilterText('');
-  };
-  const onInputChange = (value: string) => {
-    setFieldState((prev) => ({
-      inputValue: value,
-      selectedKey: value === '' ? null : prev.selectedKey,
-    }));
-
-    accessibleList.setFilterText(value);
-  };
-
-  useEffect(() => {
-    const trigger = triggerRef.current;
-    if (!trigger) return;
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setWidth(entry.target.clientWidth);
-      }
-    });
-
-    observer.observe(trigger);
-    return () => {
-      observer.unobserve(trigger);
-    };
-  }, []);
-
-  const onCreateTag = useCallback(() => {
-    const inputValue = fieldState.inputValue.trim();
-    const id = inputValue.toLocaleLowerCase();
-
-    let item = accessibleList.getItem(id);
-
-    if (!item) {
-      item = {
-        id: id,
-        name: inputValue,
-      };
-
-      setFieldState((prev) => ({
-        ...prev,
-        inputValue: '',
-        selectedKey: id,
-      }));
-
-      accessibleList.append(item);
-      selectedItems.append(item);
-    }
-  }, [fieldState.inputValue, accessibleList, selectedItems, setFieldState]);
-
-  const popLast = useCallback(() => {
-    if (selectedItems.items.length === 0) {
-      return;
-    }
-
-    const endKey = selectedItems.items[selectedItems.items.length - 1];
-
-    if (endKey) {
-      selectedItems.remove(endKey.id);
-      onItemCleared?.(endKey.id);
-    }
-
-    setFieldState({
-      inputValue: '',
-      selectedKey: null,
-    });
-  }, [selectedItems, onItemCleared]);
+    label: { control: 'text', description: 'The label of the tag field' },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text displayed when no items are selected.',
+    },
+    description: {
+      control: 'text',
+      description: 'Additional helper text displayed below the field.',
+    },
+    onItemInserted: {
+      action: 'item-inserted',
+      description:
+        'Callback fired when an item is selected. Receives the item `id` as a `Key`.',
+    },
+    onItemCleared: {
+      action: 'item-cleared',
+      description:
+        'Callback fired when an item is removed. Receives the item `id` as a `Key`.',
+    },
+    creatable: {
+      control: 'boolean',
+      description: 'Whether the user can create new options not in the list.',
+    },
+  },
+};
 
-  const onKeyDownCapture = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Backspace' && fieldState.inputValue === '') {
-        popLast();
-      }
+export const Default = (args: MultiSelectProps<Option>) => {
+  const selectedItems = useListData({
+    initialItems: [items[0], items[2]],
+  });
 
-      if (
-        e.key === 'Enter' &&
-        fieldState.inputValue &&
-        creatable &&
-        accessibleList.items.length === 0
-      ) {
-        onCreateTag();
-      }
-    },
-    [popLast, fieldState.inputValue, onCreateTag, creatable, accessibleList],
+  return (
+    <div className="w-full max-w-[400px]">
+      <MultiSelect {...args} selectedItems={selectedItems} />
+    </div>
   );
+};
 
-  return (
-    <div className={twMerge('w-full', className)}>
-      {label && <Label>{label}</Label>}
-      <div ref={triggerRef} className="relative">
-        <div className="relative flex min-h-10 w-full flex-wrap items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-1.5 shadow-sm focus-within:border-gray-500 focus-within:ring-2 focus-within:ring-gray-400">
-          <TagGroup
-            id={tagGroupIdentifier}
-            aria-label="Selected items"
-            onRemove={onRemove}
-          >
-            <TagList
-              items={selectedItems.items}
-              className="flex flex-wrap items-center gap-1"
-            >
-              {(item: Option) => (
-                <Tag
-                  className="inline-flex items-center gap-x-1.5 rounded-md bg-gray-200 px-2 py-0.5 text-sm text-gray-800"
-                  textValue={item.name}
-                  id={item.id}
-                >
-                  {item.name}
-                  <Button
-                    slot="remove"
-                    className="grid cursor-pointer place-content-center text-gray-500 hover:bg-gray-600 hover:text-gray-300 focus:bg-gray-600 focus:outline-none"
-                    type="button"
-                  >
-                    <Close size="xs" />
-                  </Button>
-                </Tag>
-              )}
-            </TagList>
-          </TagGroup>
-          <ComboBox
-            {...props}
-            allowsEmptyCollection
-            aria-label="Available items"
-            items={accessibleList.items}
-            selectedKey={fieldState.selectedKey}
-            inputValue={fieldState.inputValue}
-            onSelectionChange={onSelectionChange}
-            onInputChange={onInputChange}
-            className="relative flex flex-1"
-          >
-            <Input
-              placeholder={placeholder}
-              onBlur={() => {
-                setFieldState({
-                  inputValue: '',
-                  selectedKey: null,
-                });
-                accessibleList.setFilterText('');
-              }}
-              onKeyDownCapture={onKeyDownCapture}
-              className="min-w-0 flex-1 bg-white px-2 py-1.5 text-sm text-gray-800 outline-0 disabled:text-gray-200"
-            />
+Default.args = {
+  label: 'Fruits',
+  items: items,
+  onItemInserted: (id: Key) => console.log('Item inserted:', id),
+  onItemCleared: (id: Key) => console.log('Item removed:', id),
+} as Partial<MultiSelectProps<Option>>;
 
-            <Button
-              className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 focus:outline-none"
-              type="button"
-            >
-              <ChevrondownIcon />
-            </Button>
+export const NonCreatable = Default.bind({});
 
-            <Popover
-              isNonModal
-              trigger="ComboBox"
-              triggerRef={triggerRef}
-              style={{ width: `${width}px` }}
-              className="max-w-none overflow-hidden"
-            >
-              <ListBox
-                selectionMode="multiple"
-                className="rounded-md border border-gray-200 bg-white p-1 shadow-lg"
-                disallowEmptySelection={false}
-                renderEmptyState={
-                  renderEmptyState
-                    ? () => renderEmptyState(fieldState.inputValue)
-                    : () => (
-                        <div
-                          className="block cursor-pointer rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
-                          role="button"
-                          onMouseDown={(e) => {
-                            e.stopPropagation();
-                            if (fieldState.inputValue && creatable) {
-                              onCreateTag();
-                            }
-                          }}
-                          tabIndex={0}
-                        >
-                          {fieldState.inputValue ? (
-                            <>
-                              {creatable ? 'Create:' : 'No results found for:'}{' '}
-                              <strong className="font-medium text-gray-900">
-                                {fieldState.inputValue}
-                              </strong>
-                            </>
-                          ) : (
-                            'No options'
-                          )}
-                        </div>
-                      )
-                }
-              >
-                {(item: Option) => (
-                  <ListBoxItem
-                    key={item.id}
-                    id={item.id}
-                    textValue={item.name}
-                    className="cursor-pointer rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none data-[focused]:bg-gray-100"
-                  >
-                    {item.name}
-                  </ListBoxItem>
-                )}
-              </ListBox>
-            </Popover>
-          </ComboBox>
-        </div>
-      </div>
-      {description && <Description>{description}</Description>}
-    </div>
-  );
-}
+NonCreatable.args = {
+  ...Default.args,
+  creatable: false,
+  label: 'Non-Creatable Fruits',
+};

From 0b36e2068f3249338877cf3713da23915b94e7aa Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 11 Sep 2025 14:57:58 +0300
Subject: [PATCH 6/9] Create 7345.feat

---
 packages/components/news/7345.feat | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/components/news/7345.feat

diff --git a/packages/components/news/7345.feat b/packages/components/news/7345.feat
new file mode 100644
index 00000000000..c4e8166272c
--- /dev/null
+++ b/packages/components/news/7345.feat
@@ -0,0 +1 @@
+Select widget for Plone 7 @dobri1408

From 7bb40a2b59a4760bb424d8fed7f85a74b42b3943 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 11 Sep 2025 17:43:21 +0300
Subject: [PATCH 7/9] Delete packages/components/news/7345.feat

---
 packages/components/news/7345.feat | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 packages/components/news/7345.feat

diff --git a/packages/components/news/7345.feat b/packages/components/news/7345.feat
deleted file mode 100644
index c4e8166272c..00000000000
--- a/packages/components/news/7345.feat
+++ /dev/null
@@ -1 +0,0 @@
-Select widget for Plone 7 @dobri1408

From 765447da867916561a566f45feca88137727a4d6 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 11 Sep 2025 17:43:43 +0300
Subject: [PATCH 8/9] Create 7345.feature

---
 packages/components/news/7345.feature | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/components/news/7345.feature

diff --git a/packages/components/news/7345.feature b/packages/components/news/7345.feature
new file mode 100644
index 00000000000..c4e8166272c
--- /dev/null
+++ b/packages/components/news/7345.feature
@@ -0,0 +1 @@
+Select widget for Plone 7 @dobri1408

From b78b32b90ee4c4957396cf5917499dc4d5737322 Mon Sep 17 00:00:00 2001
From: nileshgulia1 <nileshgulia@gmail.com>
Date: Fri, 12 Sep 2025 15:16:05 +0200
Subject: [PATCH 9/9] fix: fix infinite calls to onFocus,onBlur and register
 widget by factory, fix styles

---
 packages/cmsui/config/widgets.ts              |  7 ++++
 .../Select/Select.quanta.stories.tsx          | 16 ++++---
 .../src/components/Select/Select.quanta.tsx   | 42 ++++++++++++++-----
 packages/components/src/quanta/index.ts       |  1 +
 4 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/packages/cmsui/config/widgets.ts b/packages/cmsui/config/widgets.ts
index d94d0c0316c..b397b64fb42 100644
--- a/packages/cmsui/config/widgets.ts
+++ b/packages/cmsui/config/widgets.ts
@@ -6,6 +6,7 @@ import {
   DateTimePicker,
   SizeWidget,
   WidthWidget,
+  SelectWidget,
 } from '@plone/components/quanta';
 import { DateField } from '@plone/components';
 
@@ -30,5 +31,11 @@ export default function install(config: ConfigType) {
     definition: { width: WidthWidget },
   });
 
+  config.registerWidget({
+    key: 'factory',
+    definition: { Choice: SelectWidget },
+  });
+  //console.log(config.widgets);
+
   return config;
 }
diff --git a/packages/components/src/components/Select/Select.quanta.stories.tsx b/packages/components/src/components/Select/Select.quanta.stories.tsx
index f6de7adf311..a7eb438170c 100644
--- a/packages/components/src/components/Select/Select.quanta.stories.tsx
+++ b/packages/components/src/components/Select/Select.quanta.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Select, type Option, type SelectProps } from './Select.quanta';
+import { SelectWidget, type Option, type SelectProps } from './Select.quanta';
 import { type Key } from 'react-aria-components';
 
 const fruits: Option[] = [
@@ -17,7 +17,7 @@ const fruits: Option[] = [
 
 export default {
   title: 'Quanta/Select',
-  component: Select,
+  component: SelectWidget,
   parameters: {
     layout: 'centered',
   },
@@ -57,8 +57,8 @@ export default {
 
 export const Default = (args: SelectProps<Option>) => {
   return (
-    <div className="w-full max-w-[300px]">
-      <Select {...args} />
+    <div className="w-full max-w-[600px]">
+      <SelectWidget {...args} />
     </div>
   );
 };
@@ -112,8 +112,12 @@ export const Controlled = (args: SelectProps<Option>) => {
   };
 
   return (
-    <div className="w-full max-w-[300px] space-y-4">
-      <Select {...args} selectedKey={selectedKey} onChange={handleChange} />
+    <div className="w-full max-w-[600px] space-y-4">
+      <SelectWidget
+        {...args}
+        selectedKey={selectedKey}
+        onChange={handleChange}
+      />
       <div className="text-sm">
         <strong>Currently Selected:</strong>
         <div className="mt-1 rounded border bg-gray-50 p-2">
diff --git a/packages/components/src/components/Select/Select.quanta.tsx b/packages/components/src/components/Select/Select.quanta.tsx
index 65fe20a63b0..aa5828b288d 100644
--- a/packages/components/src/components/Select/Select.quanta.tsx
+++ b/packages/components/src/components/Select/Select.quanta.tsx
@@ -15,7 +15,6 @@ import {
   Button,
   Select as AriaSelect,
   SelectValue,
-  composeRenderProps,
   Popover,
   Dialog,
   ListBoxItem,
@@ -48,10 +47,7 @@ const SelectTrigger = ({
         className,
       )}
     >
-      <SelectValue
-        className="flex-1 truncate text-left data-[placeholder]:text-gray-500"
-        placeholder={placeholder}
-      />
+      <SelectValue className="flex-1 truncate text-left data-[placeholder]:text-gray-500" />
       <ChevrondownIcon className="h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180" />
     </Button>
   );
@@ -68,18 +64,21 @@ const SelectList = <T extends Option>({
   items,
   className,
   placement = 'bottom',
+  onBlur,
+  onFocus,
   ...props
 }: SelectListProps<T>) => {
   return (
     <Popover
-      className="z-50 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg"
+      className="z-50 w-[var(--trigger-width)] overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg"
       placement={placement}
     >
-      <Dialog role="dialog">
+      <Dialog role="dialog" className="w-[var(--trigger-width)] outline-none">
         <ListBox
-          className={twMerge('max-h-60 overflow-auto', className)}
+          className={twMerge('max-h-60 overflow-auto outline-none', className)}
           items={items}
-          {...props}
+          onBlur={onBlur}
+          onFocus={onFocus}
         >
           {(item) => (
             <ListBoxItem
@@ -114,12 +113,13 @@ export interface SelectProps<T extends Option>
   className?: string;
   listBoxClassName?: string;
   placement?: PopoverProps['placement'];
+  choices?: string[]; // alternative to items
   onChange?: (value: Key | null) => void;
   onBlur?: () => void;
   onFocus?: () => void;
 }
 
-export function Select<T extends Option>({
+function Select<T extends Option>({
   label,
   description,
   errorMessage,
@@ -135,7 +135,6 @@ export function Select<T extends Option>({
 }: SelectProps<T>) {
   return (
     <AriaSelect
-      {...props}
       onSelectionChange={onChange}
       className={twMerge('group flex w-full flex-col gap-1.5', className)}
     >
@@ -159,3 +158,24 @@ export function Select<T extends Option>({
     </AriaSelect>
   );
 }
+
+export function SelectWidget<T extends Option>({
+  choices,
+  items,
+  ...props
+}: SelectProps<T>) {
+  let selectItems = items;
+
+  // If choices are provided, map them to the items format.
+  if (choices && choices.length > 0) {
+    selectItems = choices.map(
+      (item) =>
+        ({
+          id: item,
+          name: item,
+        }) as T,
+    );
+  }
+
+  return <Select {...props} items={selectItems} />;
+}
diff --git a/packages/components/src/quanta/index.ts b/packages/components/src/quanta/index.ts
index 1d92f6e21e2..adced0703be 100644
--- a/packages/components/src/quanta/index.ts
+++ b/packages/components/src/quanta/index.ts
@@ -19,3 +19,4 @@ export * from '../components/RadioGroup/RadioGroup.quanta';
 export * from '../components/MultiSelect/MultiSelect.quanta';
 export * from '../components/Separator/Separator.quanta';
 export * from '../components/Tabs/Tabs.quanta';
+export { SelectWidget } from '../components/Select/Select.quanta';