diff --git a/packages/design-system/.ladle/head.html b/packages/design-system/.ladle/head.html
index f0391a58..743dc60f 100644
--- a/packages/design-system/.ladle/head.html
+++ b/packages/design-system/.ladle/head.html
@@ -38,7 +38,7 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
-    --radius: 0.3rem;
+    --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
diff --git a/packages/design-system/src/Select.stories.tsx b/packages/design-system/src/Select.stories.tsx
index 5ee45225..b0f1b539 100644
--- a/packages/design-system/src/Select.stories.tsx
+++ b/packages/design-system/src/Select.stories.tsx
@@ -1,69 +1,6 @@
 import { useState } from 'react'
 import Select from './Select'
-
-export const fruitsValues = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'pear', label: 'Pear' },
-  { value: 'watermelon', label: 'Watermelon' },
-  { value: 'peach', label: 'Peach' },
-  { value: 'mango', label: 'Mango' },
-]
-export const vegetablesValues = [
-  { value: 'carrot', label: 'Carrot' },
-  { value: 'cucumber', label: 'Cucumber' },
-  { value: 'onion', label: 'Onion' },
-  { value: 'potato', label: 'Potato' },
-  { value: 'tomato', label: 'Tomato' },
-  { value: 'broccoli', label: 'Broccoli' },
-]
-export const transportValues = [
-  { value: 'car', label: 'Car' },
-  { value: 'bike', label: 'Bike' },
-  { value: 'train', label: 'Train' },
-  { value: 'plane', label: 'Plane' },
-  { value: 'boat', label: 'Boat' },
-  { value: 'bus', label: 'Bus' },
-]
-export const programmingValues = [
-  { value: 'javascript', label: 'JavaScript' },
-  { value: 'typescript', label: 'TypeScript' },
-  { value: 'python', label: 'Python' },
-  { value: 'ruby', label: 'Ruby' },
-  { value: 'java', label: 'Java' },
-  { value: 'csharp', label: 'C#' },
-]
-
-export const programmingValuesDisabled = [
-  { value: 'javascript', label: 'JavaScript (disabled)', disabled: true },
-  { value: 'typescript', label: 'TypeScript' },
-  { value: 'python', label: 'Python (disabled)', disabled: true },
-  { value: 'ruby', label: 'Ruby' },
-  { value: 'java', label: 'Java (disabled)' },
-  { value: 'csharp', label: 'C#' },
-]
-
-export const groupValues = [
-  { items: fruitsValues },
-  { items: vegetablesValues, showSeparator: true },
-  { items: transportValues, showSeparator: true, label: 'Transport' },
-  {
-    items: programmingValues,
-    showSeparator: true,
-    label: 'Programming Languages',
-  },
-]
-
-export const groupValuesDisabled = [
-  { items: fruitsValues },
-  { items: vegetablesValues, showSeparator: true },
-  { items: transportValues, showSeparator: true, label: 'Transport' },
-  {
-    items: programmingValuesDisabled,
-    showSeparator: true,
-    label: 'Programming Languages',
-  },
-]
+import { fruitsValues, groupValues } from './values'
 
 export const Default = () => {
   return (
@@ -212,9 +149,8 @@ export const Styled = () => {
         className={{
           root: 'h-full rounded-none border-none',
           content: 'bg-green-200',
-          trigger: 'rounded-none border-none bg-uzh-blue-20',
+          trigger: 'rounded-none border-none bg-uzh-blue-20 text-lg',
           item: 'text-red-700',
-          scrollButton: 'bg-blue-400',
           groupLabel: 'text-red-700',
           separator: 'bg-green-700',
         }}
@@ -223,17 +159,6 @@ export const Styled = () => {
   )
 }
 
-export const Small = () => {
-  return (
-    <Select
-      placeholder="Select an item"
-      groups={groupValues}
-      onChange={(newValue) => console.log(newValue)}
-      size="sm"
-    />
-  )
-}
-
 export const CustomTriggerLabel = () => {
   const items = [
     { value: 'apple', label: 'Apple long label', shortLabel: 'Apple' },
diff --git a/packages/design-system/src/Select.tsx b/packages/design-system/src/Select.tsx
index 265b284d..be7c3835 100644
--- a/packages/design-system/src/Select.tsx
+++ b/packages/design-system/src/Select.tsx
@@ -1,20 +1,21 @@
-import {
-  faCheck,
-  faChevronDown,
-  faChevronUp,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import * as RadixSelect from '@radix-ui/react-select'
-import React, { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
+import {
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Select as ShadcnSelect,
+} from './ui/select'
 
 export interface SelectClassName {
   root?: string
   trigger?: string
   content?: string
   item?: string
-  text?: string
-  scrollButton?: string
   groupLabel?: string
   separator?: string
 }
@@ -30,12 +31,10 @@ interface SelectProps {
   onBlur?: () => void
   value?: string
   disabled?: boolean
-  size?: 'md' | 'sm'
   className?: SelectClassName
   placeholder?: string
   defaultValue?: string
   basic?: boolean
-  asPortal?: boolean
   contentPosition?: 'item-aligned' | 'popper'
 }
 
@@ -82,10 +81,8 @@ export interface SelectWithGroupsProps extends SelectProps {
  * @param defaultValue - The default value of the select component set initially.
  * @param placeholder - The placeholder text that is displayed when no value is selected.
  * @param disabled - Specifies whether the select component is disabled or not.
- * @param size - The size of the select component. Currently only medium and small are supported.
  * @param basic - Specifies whether the select component is basic or not. A basic select component does only have minimal styling of the trigger.
  * @param className - The optional className object allows you to override the default styling.
- * @param asPortal - If true, the select component is rendered as a portal.
  * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported.
  * @return Select component
  */
@@ -98,76 +95,26 @@ export function Select({
   onBlur,
   value,
   disabled = false,
-  size = 'md',
   className,
   name,
   placeholder,
   defaultValue,
   basic = false,
-  asPortal = false,
   contentPosition = 'item-aligned',
 }: SelectWithItemsProps | SelectWithGroupsProps) {
   const [open, setOpen] = useState(false)
-  const flatItems = items || groups?.flatMap((group) => group.items) || []
+  const [shortLabel, setShortLabel] = useState<string | undefined>(undefined)
 
-  const selectContent = (
-    <RadixSelect.Content
-      position={contentPosition}
-      className={twMerge(
-        'z-50 overflow-hidden rounded-md bg-white shadow-md',
-        className?.content
-      )}
-    >
-      <RadixSelect.ScrollUpButton
-        className={twMerge(
-          'flex h-7 items-center justify-center bg-white',
-          className?.scrollButton
-        )}
-      >
-        <FontAwesomeIcon
-          icon={faChevronUp}
-          size={size === 'sm' ? 'sm' : '1x'}
-        />
-      </RadixSelect.ScrollUpButton>
-      <RadixSelect.Viewport className="rounded-lg p-1">
-        {items
-          ? items.map((item, ix) => (
-              <SelectItemComponent
-                id={id}
-                data={item.data}
-                key={ix}
-                size={size}
-                {...item}
-                className={className}
-              />
-            ))
-          : groups.map((group, ix) => (
-              <SelectGroupComponent
-                key={ix}
-                size={size}
-                {...group}
-                className={className}
-              />
-            ))}
-      </RadixSelect.Viewport>
-      <RadixSelect.ScrollDownButton
-        className={twMerge(
-          'flex h-7 items-center justify-center bg-white',
-          className?.scrollButton
-        )}
-      >
-        <FontAwesomeIcon
-          icon={faChevronDown}
-          size={size === 'sm' ? 'sm' : '1x'}
-        />
-      </RadixSelect.ScrollDownButton>
-    </RadixSelect.Content>
-  )
+  useEffect(() => {
+    const flatItems = items || groups?.flatMap((group) => group.items) || []
+    setShortLabel(flatItems?.find((item) => item.value === value)?.shortLabel)
+  }, [value, items, groups])
 
   return (
     <div className={twMerge('relative flex', className?.root)}>
-      <RadixSelect.Root
+      <ShadcnSelect
         name={name}
+        open={open}
         onValueChange={onChange}
         onOpenChange={(open) => {
           setOpen(open)
@@ -178,150 +125,81 @@ export function Select({
         value={value}
         defaultValue={defaultValue}
       >
-        <RadixSelect.Trigger
+        <SelectTrigger
           id={id}
           data-cy={data?.cy}
           data-test={data?.test}
           className={twMerge(
-            'rounded-md px-2 py-1',
-            !basic &&
-              'inline-flex h-7 items-center justify-between gap-2 border bg-white p-4 shadow-sm hover:bg-primary-20 hover:text-primary-100',
-            disabled &&
-              'hover:bg-none, hover:text-none cursor-not-allowed bg-uzh-grey-20 opacity-70 shadow-sm',
-            size === 'sm' && '!text-sm',
+            'w-[15rem] text-base',
+            disabled && 'bg-uzh-grey-20 opacity-70',
+            basic && '[all:_unset]',
             className?.trigger
           )}
+          hideIcon={basic}
           disabled={disabled}
         >
-          <div
-            className={
-              flatItems?.find((item) => item.value === value)?.shortLabel &&
-              'hidden'
-            }
-          >
-            <RadixSelect.Value placeholder={placeholder} />
-          </div>
-          <div
-            className={twMerge(
-              'hidden',
-              flatItems?.find((item) => item.value === value)?.shortLabel &&
-                'block'
-            )}
-          >
-            {flatItems?.find((item) => item.value === value)?.shortLabel}
-          </div>
-
-          {!basic && (
-            <RadixSelect.Icon
-              className={twMerge('ml-2', size === 'sm' && 'ml-0.5')}
-            >
-              <FontAwesomeIcon
-                icon={open ? faChevronUp : faChevronDown}
-                size={size === 'sm' ? 'sm' : '1x'}
-              />
-            </RadixSelect.Icon>
-          )}
-        </RadixSelect.Trigger>
-        {asPortal ? (
-          <RadixSelect.Portal>{selectContent}</RadixSelect.Portal>
-        ) : (
-          selectContent
-        )}
-      </RadixSelect.Root>
-    </div>
-  )
-}
-
-interface SelectItemProps {
-  id?: string
-  data?: {
-    cy?: string
-    test?: string
-  }
-  label: string
-  className?: SelectClassName
-  size?: string
-  value: string
-  disabled?: boolean
-}
-
-const SelectItemComponent = React.forwardRef(
-  (
-    { id, data, className, label, size, disabled, ...props }: SelectItemProps,
-    forwardedRef
-  ) => {
-    return (
-      <RadixSelect.Item
-        id={id}
-        data-cy={data?.cy}
-        data-test={data?.test}
-        className={twMerge(
-          'relative flex select-none items-center rounded-md px-8 py-2 font-medium text-gray-700',
-          'hover:cursor-pointer hover:bg-primary-20 hover:text-primary-100 hover:outline-none focus:border-primary-40',
-          disabled &&
-            'cursor-not-allowed opacity-50 hover:cursor-not-allowed hover:bg-white hover:text-gray-700',
-          size === 'sm' && 'px-7 text-sm',
-          className?.item
-        )}
-        disabled={disabled}
-        {...props}
-        ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}
-      >
-        <RadixSelect.ItemText className={twMerge(className?.text)}>
-          {label}
-        </RadixSelect.ItemText>
-        <RadixSelect.ItemIndicator className="absolute left-2 inline-flex items-center">
-          <FontAwesomeIcon icon={faCheck} size={size === 'sm' ? 'sm' : '1x'} />
-        </RadixSelect.ItemIndicator>
-      </RadixSelect.Item>
-    )
-  }
-)
-
-interface SelectGroupProps {
-  items: SelectItem[]
-  size?: 'md' | 'sm'
-  showSeparator?: boolean
-  label?: string
-  className?: SelectClassName
-}
-
-const SelectGroupComponent = ({
-  items,
-  size,
-  showSeparator,
-  label,
-  className,
-  ...props
-}: SelectGroupProps) => {
-  return (
-    <>
-      {showSeparator && (
-        <RadixSelect.Separator
-          className={twMerge('h-0.5 bg-black', className?.separator)}
-        />
-      )}
-      <RadixSelect.Group {...props}>
-        <RadixSelect.Label
-          className={twMerge(
-            'p-1 font-bold',
-            size === 'sm' && '!text-sm',
-            className?.groupLabel
+          {shortLabel ? (
+            <SelectValue placeholder={placeholder} key={shortLabel}>
+              {shortLabel}
+            </SelectValue>
+          ) : (
+            <SelectValue placeholder={placeholder} key={shortLabel} />
           )}
+        </SelectTrigger>
+        <SelectContent
+          position={contentPosition}
+          className={twMerge('z-50', className?.content)}
         >
-          {label}
-        </RadixSelect.Label>
-        {items.map((item, ix) => (
-          <SelectItemComponent
-            key={ix}
-            size={size}
-            data={item.data}
-            {...item}
-            className={className}
-          />
-        ))}
-      </RadixSelect.Group>
-    </>
+          {items
+            ? items.map((item, ix) => (
+                <SelectItem
+                  id={id}
+                  key={`${item.value}-${ix}`}
+                  value={item.value}
+                  disabled={item.disabled}
+                  data-cy={item.data?.cy}
+                  data-test={item.data?.test}
+                  className={twMerge(
+                    'text-base',
+                    item.disabled && 'cursor-not-allowed',
+                    className?.item
+                  )}
+                >
+                  {item.label}
+                </SelectItem>
+              ))
+            : groups.map((group, ix) => (
+                <SelectGroup key={`group-${group.label}-${ix}`}>
+                  {group.showSeparator && <SelectSeparator />}
+                  {group.label && (
+                    <SelectLabel
+                      className={twMerge('text-base', className?.groupLabel)}
+                    >
+                      {group.label}
+                    </SelectLabel>
+                  )}
+                  {group.items.map((item, item_ix) => (
+                    <SelectItem
+                      id={id}
+                      key={`${item.value}-${item_ix}`}
+                      value={item.value}
+                      disabled={item.disabled}
+                      data-cy={item.data?.cy}
+                      data-test={item.data?.test}
+                      className={twMerge(
+                        'text-base',
+                        item.disabled && '!cursor-not-allowed',
+                        className?.item
+                      )}
+                    >
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              ))}
+        </SelectContent>
+      </ShadcnSelect>
+    </div>
   )
 }
 
diff --git a/packages/design-system/src/forms/FormikSelectField.stories.tsx b/packages/design-system/src/forms/FormikSelectField.stories.tsx
index 32748175..82267804 100644
--- a/packages/design-system/src/forms/FormikSelectField.stories.tsx
+++ b/packages/design-system/src/forms/FormikSelectField.stories.tsx
@@ -5,7 +5,7 @@ import {
   groupValues,
   groupValuesDisabled,
   programmingValuesDisabled,
-} from '../Select.stories'
+} from '../values'
 import FormikSelectField from './FormikSelectField'
 
 export const Default = () => {
diff --git a/packages/design-system/src/forms/SelectField.stories.tsx b/packages/design-system/src/forms/SelectField.stories.tsx
index a8512cad..831d7ccf 100644
--- a/packages/design-system/src/forms/SelectField.stories.tsx
+++ b/packages/design-system/src/forms/SelectField.stories.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { fruitsValues, groupValues } from '../Select.stories'
+import { fruitsValues, groupValues } from '../values'
 import SelectField from './SelectField'
 
 export const Default = () => {
diff --git a/packages/design-system/src/tailwind.css b/packages/design-system/src/tailwind.css
index 2b496da4..da6bf9a7 100644
--- a/packages/design-system/src/tailwind.css
+++ b/packages/design-system/src/tailwind.css
@@ -23,7 +23,7 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
-    --radius: 0.3rem;
+    --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
diff --git a/packages/design-system/src/ui/select.stories.tsx b/packages/design-system/src/ui/select.stories.tsx
new file mode 100644
index 00000000..9f6b2772
--- /dev/null
+++ b/packages/design-system/src/ui/select.stories.tsx
@@ -0,0 +1,89 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/ui/select'
+import type { Story, StoryDefault } from '@ladle/react'
+
+export default {
+  title: 'Shadcn/Select',
+} satisfies StoryDefault
+
+export const Default: Story = () => (
+  <Select>
+    <SelectTrigger className="w-[180px]">
+      <SelectValue placeholder="Theme" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="light">Light</SelectItem>
+      <SelectItem value="dark">Dark</SelectItem>
+      <SelectItem value="system">System</SelectItem>
+    </SelectContent>
+  </Select>
+)
+
+export const Groups: Story = () => (
+  <Select>
+    <SelectTrigger className="w-[280px]">
+      <SelectValue placeholder="Select a timezone" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>North America</SelectLabel>
+        <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+        <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+        <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+        <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+        <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+        <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Europe & Africa</SelectLabel>
+        <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+        <SelectItem value="cet">Central European Time (CET)</SelectItem>
+        <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+        <SelectItem value="west">
+          Western European Summer Time (WEST)
+        </SelectItem>
+        <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+        <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Asia</SelectLabel>
+        <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
+        <SelectItem value="ist">India Standard Time (IST)</SelectItem>
+        <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
+        <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
+        <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
+        <SelectItem value="ist_indonesia">
+          Indonesia Central Standard Time (WITA)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Australia & Pacific</SelectLabel>
+        <SelectItem value="awst">
+          Australian Western Standard Time (AWST)
+        </SelectItem>
+        <SelectItem value="acst">
+          Australian Central Standard Time (ACST)
+        </SelectItem>
+        <SelectItem value="aest">
+          Australian Eastern Standard Time (AEST)
+        </SelectItem>
+        <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
+        <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>South America</SelectLabel>
+        <SelectItem value="art">Argentina Time (ART)</SelectItem>
+        <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
+        <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
+        <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+)
diff --git a/packages/design-system/src/ui/select.tsx b/packages/design-system/src/ui/select.tsx
index e7a1a8ac..77190776 100644
--- a/packages/design-system/src/ui/select.tsx
+++ b/packages/design-system/src/ui/select.tsx
@@ -12,8 +12,10 @@ const SelectValue = SelectPrimitive.Value
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    hideIcon?: boolean
+  }
+>(({ className, children, hideIcon = false, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -23,9 +25,11 @@ const SelectTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
+    {!hideIcon && (
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="ml-3 h-4 w-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    )}
   </SelectPrimitive.Trigger>
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
diff --git a/packages/design-system/src/values.ts b/packages/design-system/src/values.ts
new file mode 100644
index 00000000..84586c5a
--- /dev/null
+++ b/packages/design-system/src/values.ts
@@ -0,0 +1,63 @@
+export const fruitsValues = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'pear', label: 'Pear' },
+  { value: 'watermelon', label: 'Watermelon' },
+  { value: 'peach', label: 'Peach' },
+  { value: 'mango', label: 'Mango' },
+]
+export const vegetablesValues = [
+  { value: 'carrot', label: 'Carrot' },
+  { value: 'cucumber', label: 'Cucumber' },
+  { value: 'onion', label: 'Onion' },
+  { value: 'potato', label: 'Potato' },
+  { value: 'tomato', label: 'Tomato' },
+  { value: 'broccoli', label: 'Broccoli' },
+]
+export const transportValues = [
+  { value: 'car', label: 'Car' },
+  { value: 'bike', label: 'Bike' },
+  { value: 'train', label: 'Train' },
+  { value: 'plane', label: 'Plane' },
+  { value: 'boat', label: 'Boat' },
+  { value: 'bus', label: 'Bus' },
+]
+export const programmingValues = [
+  { value: 'javascript', label: 'JavaScript' },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'python', label: 'Python' },
+  { value: 'ruby', label: 'Ruby' },
+  { value: 'java', label: 'Java' },
+  { value: 'csharp', label: 'C#' },
+]
+
+export const programmingValuesDisabled = [
+  { value: 'javascript', label: 'JavaScript (disabled)', disabled: true },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'python', label: 'Python (disabled)', disabled: true },
+  { value: 'ruby', label: 'Ruby' },
+  { value: 'java', label: 'Java (disabled)' },
+  { value: 'csharp', label: 'C#' },
+]
+
+export const groupValues = [
+  { items: fruitsValues },
+  { items: vegetablesValues, showSeparator: true },
+  { items: transportValues, showSeparator: true, label: 'Transport' },
+  {
+    items: programmingValues,
+    showSeparator: true,
+    label: 'Programming Languages',
+  },
+]
+
+export const groupValuesDisabled = [
+  { items: fruitsValues },
+  { items: vegetablesValues, showSeparator: true },
+  { items: transportValues, showSeparator: true, label: 'Transport' },
+  {
+    items: programmingValuesDisabled,
+    showSeparator: true,
+    label: 'Programming Languages',
+  },
+]