diff --git a/packages/react/src/components/DropdownSelector/Divider.tsx b/packages/react/src/components/DropdownSelector/Divider.tsx
deleted file mode 100644
index 1be948a58..000000000
--- a/packages/react/src/components/DropdownSelector/Divider.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from 'styled-components'
-
-/**
- * 水平方向の直線
- */
-export const Divider = styled.div.attrs({ role: 'separator' })`
-  display: flex;
-
-  &:before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 1px;
-    background: #00000014;
-  }
-`
diff --git a/packages/react/src/components/DropdownSelector/Divider/index.css b/packages/react/src/components/DropdownSelector/Divider/index.css
new file mode 100644
index 000000000..12055dfa2
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/Divider/index.css
@@ -0,0 +1,11 @@
+.charcoal-menu-group-divider {
+  display: flex;
+}
+
+.charcoal-menu-group-divider::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: #00000014;
+}
diff --git a/packages/react/src/components/DropdownSelector/Divider/index.tsx b/packages/react/src/components/DropdownSelector/Divider/index.tsx
new file mode 100644
index 000000000..b75a8b478
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/Divider/index.tsx
@@ -0,0 +1,5 @@
+import './index.css'
+
+export function Divider() {
+  return <div role="separator" className="charcoal-menu-group-divider" />
+}
diff --git a/packages/react/src/components/DropdownSelector/DropdownMenuItem.tsx b/packages/react/src/components/DropdownSelector/DropdownMenuItem.tsx
deleted file mode 100644
index 882e4f199..000000000
--- a/packages/react/src/components/DropdownSelector/DropdownMenuItem.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import styled from 'styled-components'
-import MenuItem, { MenuItemProps } from './MenuItem'
-import { MenuListContext } from './MenuList/MenuListContext'
-import { useContext } from 'react'
-import Icon from '../Icon'
-
-export type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>
-
-/**
- * DropdownSelectorの選択肢として使うMenuItem
- */
-export default function DropdownMenuItem(props: DropdownMenuItemProps) {
-  const { value: ctxValue } = useContext(MenuListContext)
-  const isSelected = props.value === ctxValue
-  const { children, ...rest } = props
-
-  return (
-    <MenuItem {...rest}>
-      {isSelected && <Text2ColorIcon name="16/Check" />}
-      <StyledSpan isSelected={isSelected}>{props.children}</StyledSpan>
-    </MenuItem>
-  )
-}
-
-/**
- * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる
- */
-const StyledSpan = styled.span<{ isSelected?: boolean }>`
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--charcoal-text2);
-  padding: 9px 0;
-
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-left: ${({ isSelected }) => (isSelected === true ? 0 : 20)}px;
-`
-
-const Text2ColorIcon = styled(Icon)`
-  color: var(--charcoal-text2);
-  padding-right: 4px;
-`
diff --git a/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css b/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css
new file mode 100644
index 000000000..6c3c8f3d6
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css
@@ -0,0 +1,20 @@
+.charcoal-dropdown-selector-menu-item {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  padding: 9px 0;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-left: 20px;
+}
+
+.charcoal-dropdown-selector-menu-item[data-selected='true'] {
+  margin-left: 0px;
+}
+
+.charcoal-dropdown-selector-menu-item-icon {
+  color: var(--charcoal-text2);
+  padding-right: 4px;
+}
diff --git a/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.tsx b/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.tsx
new file mode 100644
index 000000000..9c021fadf
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.tsx
@@ -0,0 +1,34 @@
+import './index.css'
+
+import MenuItem, { MenuItemProps } from '../MenuItem'
+import { MenuListContext } from '../MenuList/MenuListContext'
+import { useContext } from 'react'
+import Icon from '../../Icon'
+
+export type DropdownMenuItemProps = Omit<MenuItemProps, 'as'>
+
+/**
+ * DropdownSelectorの選択肢として使うMenuItem
+ */
+export default function DropdownMenuItem(props: DropdownMenuItemProps) {
+  const { value: ctxValue } = useContext(MenuListContext)
+  const isSelected = props.value === ctxValue
+  const { children, ...rest } = props
+
+  return (
+    <MenuItem {...rest} aria-selected={isSelected}>
+      {isSelected && (
+        <Icon
+          className="charcoal-dropdown-selector-menu-item-icon"
+          name="16/Check"
+        />
+      )}
+      <span
+        className="charcoal-dropdown-selector-menu-item"
+        data-selected={isSelected}
+      >
+        {props.children}
+      </span>
+    </MenuItem>
+  )
+}
diff --git a/packages/react/src/components/DropdownSelector/DropdownPopover.tsx b/packages/react/src/components/DropdownSelector/DropdownPopover.tsx
index 5a19a903e..d2e87fea8 100644
--- a/packages/react/src/components/DropdownSelector/DropdownPopover.tsx
+++ b/packages/react/src/components/DropdownSelector/DropdownPopover.tsx
@@ -19,15 +19,22 @@ export function DropdownPopover({ children, ...props }: DropdownPopoverProps) {
   }, [props.triggerRef, props.isOpen])
 
   useEffect(() => {
-    if (props.isOpen && props.value !== undefined) {
-      // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する
-      const windowScrollY = window.scrollY
-      const windowScrollX = window.scrollX
-      const selectedElement = document.querySelector(
-        `[data-key="${props.value.toString()}"]`
-      ) as HTMLElement | undefined
-      selectedElement?.focus()
-      window.scrollTo(windowScrollX, windowScrollY)
+    if (props.isOpen) {
+      if (props.value !== undefined && props.value !== '') {
+        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する
+        const windowScrollY = window.scrollY
+        const windowScrollX = window.scrollX
+        const selectedElement = document.querySelector(
+          `[data-key="${props.value.toString()}"]`
+        ) as HTMLElement | undefined
+        selectedElement?.focus()
+        window.scrollTo(windowScrollX, windowScrollY)
+      } else {
+        const el = ref.current?.querySelector("[role='option']")
+        if (el instanceof HTMLElement) {
+          el.focus()
+        }
+      }
     }
   }, [props.value, props.isOpen])
 
diff --git a/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot
index 33282ef02..ac3ed059e 100644
--- a/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot
@@ -2,40 +2,6 @@
 
 exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
 .c0 {
-  list-style: none;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-  padding-right: 16px;
-  padding-left: 16px;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c1:hover:not(disabled):not([aria-disabled='true']),
-.c1:focus:not(disabled):not([aria-disabled='true']),
-.c1:focus-within:not(disabled):not([aria-disabled='true']) {
-  background-color: var(--charcoal-surface3);
-}
-
-.c2 {
   color: red;
 }
 
@@ -43,77 +9,52 @@ exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
   data-dark={false}
 >
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
   >
-    <div
-      className="c1"
-    >
-      Item
-    </div>
+    Item
   </li>
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
   >
-    <div
-      className="c1"
-    >
-      <pixiv-icon
-        name="16/Add"
-      />
-       Add
-    </div>
+    <pixiv-icon
+      name="16/Add"
+    />
+     Add
   </li>
-  <li
-    className="c0"
-    role="option"
+  <a
+    className="charcoal-list-item"
+    href="#"
   >
-    <a
-      className="c1"
-      href="#"
-    >
-      Normal Link
-    </a>
-  </li>
-  <li
-    className="c0"
-    role="option"
+    Normal Link
+  </a>
+  <a
+    className="c0 charcoal-list-item"
+    href="#"
   >
-    <a
-      className="c2 c1"
-      href="#"
-    >
-      Custom Link
-    </a>
-  </li>
+    Custom Link
+  </a>
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
+    onClick={[Function]}
   >
+    Switch
     <div
-      className="c1"
-      onClick={[Function]}
-    >
-      Switch
-      <div
-        style={
-          Object {
-            "marginLeft": "auto",
-          }
+      style={
+        Object {
+          "marginLeft": "auto",
         }
-      >
-        <input
-          checked={false}
-          className="charcoal-switch-input"
-          id="test-id"
-          label="hello"
-          name="hello"
-          onChange={[Function]}
-          role="switch"
-          type="checkbox"
-        />
-      </div>
+      }
+    >
+      <input
+        checked={false}
+        className="charcoal-switch-input"
+        id="test-id"
+        label="hello"
+        name="hello"
+        onChange={[Function]}
+        role="switch"
+        type="checkbox"
+      />
     </div>
   </li>
 </div>
diff --git a/packages/react/src/components/DropdownSelector/ListItem/index.css b/packages/react/src/components/DropdownSelector/ListItem/index.css
new file mode 100644
index 000000000..4fabf12bb
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/ListItem/index.css
@@ -0,0 +1,24 @@
+.charcoal-list-item {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  padding-right: 16px;
+  padding-left: 16px;
+
+  transition: background-color 0.2s;
+}
+
+.charcoal-list-item:not([aria-disabled='true']):hover,
+.charcoal-list-item:not([aria-disabled='true']):focus,
+.charcoal-list-item:not([aria-disabled='true']):focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
+.charcoal-list-item[aria-disabled='true'] {
+  opacity: 0.32;
+  cursor: default;
+}
diff --git a/packages/react/src/components/DropdownSelector/ListItem/index.tsx b/packages/react/src/components/DropdownSelector/ListItem/index.tsx
index 6fff0581f..21021b2da 100644
--- a/packages/react/src/components/DropdownSelector/ListItem/index.tsx
+++ b/packages/react/src/components/DropdownSelector/ListItem/index.tsx
@@ -1,64 +1,25 @@
-import { ReactNode } from 'react'
-import styled from 'styled-components'
+import './index.css'
+
+import { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react'
+import { useClassNames } from '../../../_lib/useClassNames'
 
 export type CustomJSXElement =
   | keyof JSX.IntrinsicElements
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | React.JSXElementConstructor<any>
 
-export type ListItemProps<T extends CustomJSXElement = 'div'> = {
+export type ListItemProps<T extends React.ElementType = 'li'> = {
   children?: ReactNode
   as?: T
-} & Omit<React.ComponentProps<T>, 'children'>
+} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>
 
-/**
- * リストのある要素を示すコンポーネント
- *
- * asを用いて拡張することができる
- * @example
- * ```
- * <ListItem as="a" href="#">Link</ListItem>
- * <ListItem as={NextLink} href="#">NextLink</ListItem>
- * ```
- */
-export default function ListItem<T extends CustomJSXElement = 'div'>(
-  props: ListItemProps<T>
+const ListItem = forwardRef(function ListItem<T extends React.ElementType>(
+  { as, className, ...props }: ListItemProps<T>,
+  ref: ForwardedRef<HTMLLIElement>
 ) {
-  const { children, ...rest } = props
-  return (
-    <StyledLi role="option">
-      <ItemDiv {...rest}>{props.children}</ItemDiv>
-    </StyledLi>
-  )
-}
-
-const StyledLi = styled.li`
-  list-style: none;
-`
-
-const ItemDiv = styled.div`
-  display: flex;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-
-  padding-right: 16px;
-  padding-left: 16px;
-
-  transition: background-color 0.2s;
-
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-    cursor: default;
-  }
+  const Component = useMemo(() => as ?? 'li', [as])
+  const classNames = useClassNames('charcoal-list-item', className)
+  return <Component className={classNames} ref={ref} {...props}></Component>
+}) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element
 
-  :hover,
-  :focus,
-  :focus-within {
-    &:not(disabled):not([aria-disabled='true']) {
-      background-color: var(--charcoal-surface3);
-    }
-  }
-`
+export default ListItem
diff --git a/packages/react/src/components/DropdownSelector/MenuItem/index.tsx b/packages/react/src/components/DropdownSelector/MenuItem/index.tsx
index b4d0d05e7..5ef50f0d4 100644
--- a/packages/react/src/components/DropdownSelector/MenuItem/index.tsx
+++ b/packages/react/src/components/DropdownSelector/MenuItem/index.tsx
@@ -1,7 +1,8 @@
-import ListItem, { CustomJSXElement, ListItemProps } from '../ListItem'
+import { ForwardedRef, forwardRef } from 'react'
+import ListItem, { ListItemProps } from '../ListItem'
 import { useMenuItemHandleKeyDown } from './internals/useMenuItemHandleKeyDown'
 
-export type MenuItemProps<T extends CustomJSXElement = never> = {
+export type MenuItemProps<T extends React.ElementType = 'li'> = {
   value?: string
   disabled?: boolean
 } & ListItemProps<T>
@@ -10,22 +11,26 @@ export type MenuItemProps<T extends CustomJSXElement = never> = {
  * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目
  * 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する
  */
-export default function MenuItem<T extends CustomJSXElement>(
-  props: MenuItemProps<T>
+const MenuItem = forwardRef(function MenuItem<
+  T extends React.ElementType = 'li'
+>(
+  { className, value, disabled, ...props }: MenuItemProps<T>,
+  ref: ForwardedRef<HTMLLIElement>
 ) {
-  const { children, as, ...rest } = props
-  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value)
+  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value)
   return (
     <ListItem
-      {...rest}
-      as={as as CustomJSXElement}
-      data-key={props.value}
+      {...props}
+      ref={ref}
+      data-key={value}
       onKeyDown={handleKeyDown}
-      onClick={props.disabled === true ? undefined : setContextValue}
+      onClick={disabled === true ? undefined : setContextValue}
       tabIndex={-1}
-      aria-disabled={props.disabled}
+      aria-disabled={disabled}
+      role="option"
     >
       {props.children}
     </ListItem>
   )
-}
+})
+export default MenuItem
diff --git a/packages/react/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx b/packages/react/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
index fcebcf815..3a145e3d0 100644
--- a/packages/react/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
+++ b/packages/react/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
@@ -11,14 +11,14 @@ import { MenuListContext } from '../../MenuList/MenuListContext'
  */
 export function useMenuItemHandleKeyDown(
   value?: string
-): [(e: React.KeyboardEvent<HTMLDivElement>) => void, () => void] {
+): [(e: React.KeyboardEvent<HTMLElement>) => void, () => void] {
   const { setValue, root, propsArray } = useContext(MenuListContext)
   const setContextValue = useCallback(() => {
     if (value !== undefined) setValue(value)
   }, [value, setValue])
 
   const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
+    (e: React.KeyboardEvent<HTMLElement>) => {
       if (e.key === 'Enter') {
         setContextValue()
       } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
diff --git a/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css
new file mode 100644
index 000000000..a34d43442
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css
@@ -0,0 +1,19 @@
+.charcoal-menu-item-group {
+  display: block;
+}
+
+.charcoal-menu-item-group > span {
+  display: block;
+  color: var(--charcoal-text3);
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+}
+
+.charcoal-menu-item-group > ul {
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+}
diff --git a/packages/react/src/components/DropdownSelector/MenuItemGroup/index.tsx b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.tsx
index c15927427..7e3c94d4d 100644
--- a/packages/react/src/components/DropdownSelector/MenuItemGroup/index.tsx
+++ b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.tsx
@@ -1,4 +1,5 @@
-import styled from 'styled-components'
+import './index.css'
+
 import MenuItem from '../MenuItem'
 import { Divider } from '../Divider'
 
@@ -9,34 +10,11 @@ export type MenuItemGroupProps = {
   children: MenuItemGroupChild | MenuItemGroupChild[]
 }
 
-/**
- * 項目のリストを分類する見出しをつけるコンテナ要素
- */
 export default function MenuItemGroup(props: MenuItemGroupProps) {
   return (
-    <StyledLi role="presentation">
-      <TextSpan>{props.text}</TextSpan>
-      <StyledUl role="group">{props.children}</StyledUl>
-    </StyledLi>
+    <li className="charcoal-menu-item-group" role="presentation">
+      <span>{props.text}</span>
+      <ul role="group">{props.children}</ul>
+    </li>
   )
 }
-
-const TextSpan = styled.span`
-  display: block;
-  color: var(--charcoal-text3);
-  font-size: 12px;
-  font-weight: bold;
-  padding: 12px 0 8px 16px;
-`
-
-const StyledUl = styled.ul`
-  padding-left: 0;
-  margin: 0;
-  box-sizing: border-box;
-  list-style: none;
-  overflow: hidden;
-`
-
-const StyledLi = styled.li`
-  display: block;
-`
diff --git a/packages/react/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot
index 7a273dfc3..59b43724e 100644
--- a/packages/react/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot
@@ -1,549 +1,295 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests react/internals/MenuList Basic 1`] = `
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
-.c1 {
-  list-style: none;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-  padding-right: 16px;
-  padding-left: 16px;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-
-.c2:disabled,
-.c2[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c2:hover:not(disabled):not([aria-disabled='true']),
-.c2:focus:not(disabled):not([aria-disabled='true']),
-.c2:focus-within:not(disabled):not([aria-disabled='true']) {
-  background-color: var(--charcoal-surface3);
-}
-
 <div
   data-dark={false}
 >
   <ul
-    className="c0"
+    className="charcoal-menu-list"
   >
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="0"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="0"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="0"
-      >
-        Menu 
-        0
-      </div>
+      Menu 
+      0
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="1"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="1"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="1"
-      >
-        Menu 
-        1
-      </div>
+      Menu 
+      1
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="2"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="2"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="2"
-      >
-        Menu 
-        2
-      </div>
+      Menu 
+      2
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="3"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="3"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="3"
-      >
-        Menu 
-        3
-      </div>
+      Menu 
+      3
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="4"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="4"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="4"
-      >
-        Menu 
-        4
-      </div>
+      Menu 
+      4
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="5"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="5"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="5"
-      >
-        Menu 
-        5
-      </div>
+      Menu 
+      5
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="6"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="6"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="6"
-      >
-        Menu 
-        6
-      </div>
+      Menu 
+      6
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="7"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="7"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="7"
-      >
-        Menu 
-        7
-      </div>
+      Menu 
+      7
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="8"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="8"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="8"
-      >
-        Menu 
-        8
-      </div>
+      Menu 
+      8
     </li>
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="9"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="9"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="9"
-      >
-        Menu 
-        9
-      </div>
+      Menu 
+      9
     </li>
   </ul>
 </div>
 `;
 
 exports[`Storybook Tests react/internals/MenuList Disabled 1`] = `
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
-.c1 {
-  list-style: none;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-  padding-right: 16px;
-  padding-left: 16px;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-
-.c2:disabled,
-.c2[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c2:hover:not(disabled):not([aria-disabled='true']),
-.c2:focus:not(disabled):not([aria-disabled='true']),
-.c2:focus-within:not(disabled):not([aria-disabled='true']) {
-  background-color: var(--charcoal-surface3);
-}
-
 <div
   data-dark={false}
 >
   <ul
-    className="c0"
+    className="charcoal-menu-list"
   >
     <li
-      className="c1"
+      className="charcoal-list-item"
+      data-key="1"
+      onClick={[Function]}
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        className="c2"
-        data-key="1"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="1"
-      >
-        MenuItem
-      </div>
+      MenuItem
     </li>
     <li
-      className="c1"
+      aria-disabled={true}
+      className="charcoal-list-item"
+      data-key="2"
+      onKeyDown={[Function]}
       role="option"
+      tabIndex={-1}
     >
-      <div
-        aria-disabled={true}
-        className="c2"
-        data-key="2"
-        disabled={true}
-        onKeyDown={[Function]}
-        tabIndex={-1}
-        value="2"
-      >
-        Disabled MenuItem
-      </div>
+      Disabled MenuItem
     </li>
   </ul>
 </div>
 `;
 
 exports[`Storybook Tests react/internals/MenuList Group 1`] = `
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
-.c2 {
-  display: block;
-  color: var(--charcoal-text3);
-  font-size: 12px;
-  font-weight: bold;
-  padding: 12px 0 8px 16px;
-}
-
-.c3 {
-  padding-left: 0;
-  margin: 0;
-  box-sizing: border-box;
-  list-style: none;
-  overflow: hidden;
-}
-
-.c1 {
-  display: block;
-}
-
-.c4 {
-  list-style: none;
-}
-
-.c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-  padding-right: 16px;
-  padding-left: 16px;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-
-.c5:disabled,
-.c5[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c5:hover:not(disabled):not([aria-disabled='true']),
-.c5:focus:not(disabled):not([aria-disabled='true']),
-.c5:focus-within:not(disabled):not([aria-disabled='true']) {
-  background-color: var(--charcoal-surface3);
-}
-
 <div
   data-dark={false}
 >
   <ul
-    className="c0"
+    className="charcoal-menu-list"
   >
     <li
-      className="c1"
+      className="charcoal-menu-item-group"
       role="presentation"
     >
-      <span
-        className="c2"
-      >
+      <span>
         Section1
       </span>
       <ul
-        className="c3"
         role="group"
       >
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="0"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="0"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="0"
-          >
-            Menu 
-            0
-          </div>
+          Menu 
+          0
         </li>
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="1"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="1"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="1"
-          >
-            Menu 
-            1
-          </div>
+          Menu 
+          1
         </li>
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="2"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="2"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="2"
-          >
-            Menu 
-            2
-          </div>
+          Menu 
+          2
         </li>
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="3"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="3"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="3"
-          >
-            Menu 
-            3
-          </div>
+          Menu 
+          3
         </li>
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="4"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="4"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="4"
-          >
-            Menu 
-            4
-          </div>
+          Menu 
+          4
         </li>
       </ul>
     </li>
     <li
-      className="c1"
+      className="charcoal-menu-item-group"
       role="presentation"
     >
-      <span
-        className="c2"
-      >
+      <span>
         Section2
       </span>
       <ul
-        className="c3"
         role="group"
       >
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="5"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="5"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="5"
-          >
-            Menu 
-            5
-          </div>
+          Menu 
+          5
         </li>
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="6"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="6"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="6"
-          >
-            Menu 
-            6
-          </div>
+          Menu 
+          6
         </li>
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="7"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="7"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="7"
-          >
-            Menu 
-            7
-          </div>
+          Menu 
+          7
         </li>
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="8"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="8"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="8"
-          >
-            Menu 
-            8
-          </div>
+          Menu 
+          8
         </li>
         <li
-          className="c4"
+          className="charcoal-list-item"
+          data-key="9"
+          onClick={[Function]}
+          onKeyDown={[Function]}
           role="option"
+          tabIndex={-1}
         >
-          <div
-            className="c5"
-            data-key="9"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={-1}
-            value="9"
-          >
-            Menu 
-            9
-          </div>
+          Menu 
+          9
         </li>
       </ul>
     </li>
diff --git a/packages/react/src/components/DropdownSelector/MenuList/index.css b/packages/react/src/components/DropdownSelector/MenuList/index.css
new file mode 100644
index 000000000..33cdef0cd
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/MenuList/index.css
@@ -0,0 +1,4 @@
+.charcoal-menu-list {
+  padding: 0;
+  margin: 0;
+}
diff --git a/packages/react/src/components/DropdownSelector/MenuList/index.tsx b/packages/react/src/components/DropdownSelector/MenuList/index.tsx
index dc5acb06b..06011133d 100644
--- a/packages/react/src/components/DropdownSelector/MenuList/index.tsx
+++ b/packages/react/src/components/DropdownSelector/MenuList/index.tsx
@@ -1,5 +1,6 @@
+import './index.css'
+
 import { useMemo, useRef } from 'react'
-import styled from 'styled-components'
 import { MenuListContext } from './MenuListContext'
 import { getValuesRecursive } from './internals/getValuesRecursive'
 import MenuItem from '../MenuItem'
@@ -18,10 +19,6 @@ export type MenuListProps = {
   onChange?: (v: string) => void
 }
 
-/**
- * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目
- * 基本的に`<MenuItem>`, `<MenuGroup>`と合わせて使用する
- */
 export default function MenuList(props: MenuListProps) {
   const root = useRef(null)
   const propsArray = useMemo(
@@ -30,7 +27,7 @@ export default function MenuList(props: MenuListProps) {
   )
 
   return (
-    <StyledUl ref={root}>
+    <ul className="charcoal-menu-list" ref={root}>
       <MenuListContext.Provider
         value={{
           value: props.value ?? '',
@@ -43,11 +40,6 @@ export default function MenuList(props: MenuListProps) {
       >
         {props.children}
       </MenuListContext.Provider>
-    </StyledUl>
+    </ul>
   )
 }
-
-const StyledUl = styled.ul`
-  padding: 0;
-  margin: 0;
-`
diff --git a/packages/react/src/components/DropdownSelector/Popover/index.css b/packages/react/src/components/DropdownSelector/Popover/index.css
new file mode 100644
index 000000000..e8fc9d795
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/Popover/index.css
@@ -0,0 +1,11 @@
+.charcoal-popover {
+  margin: 4px 0;
+  list-style: none;
+  overflow: auto;
+  max-height: inherit;
+  background-color: var(--charcoal-background1);
+  border: solid 1px var(--charcoal-border-default);
+  border-radius: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
diff --git a/packages/react/src/components/DropdownSelector/Popover/index.tsx b/packages/react/src/components/DropdownSelector/Popover/index.tsx
index c018d750f..928b080ae 100644
--- a/packages/react/src/components/DropdownSelector/Popover/index.tsx
+++ b/packages/react/src/components/DropdownSelector/Popover/index.tsx
@@ -1,6 +1,7 @@
+import './index.css'
+
 import { RefObject, useContext, useRef, ReactNode } from 'react'
 import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
-import styled from 'styled-components'
 import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'
 import { usePreventScroll } from './usePreventScroll'
 
@@ -58,23 +59,13 @@ export default function Popover(props: PopoverProps) {
           inset: 0,
         }}
       />
-      <DropdownPopoverDiv {...popoverProps} ref={finalPopoverRef}>
+      <div {...popoverProps} ref={finalPopoverRef} className="charcoal-popover">
         <DismissButton onDismiss={() => props.onClose()} />
+        <div tabIndex={0} onFocus={props.onClose} />
         {props.children}
+        <div tabIndex={0} onFocus={props.onClose} />
         <DismissButton onDismiss={() => props.onClose()} />
-      </DropdownPopoverDiv>
+      </div>
     </Overlay>
   )
 }
-
-const DropdownPopoverDiv = styled.div`
-  margin: 4px 0;
-  list-style: none;
-  overflow: auto;
-  max-height: inherit;
-  background-color: var(--charcoal-background1);
-  border: solid 1px var(--charcoal-border-default);
-  border-radius: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-`
diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
index d766e2128..10c3efb8f 100644
--- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -1,90 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -96,8 +12,37 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -138,23 +83,28 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-describedby="test-id"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 1
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
       <div
         className="charcoal-text-field-assistive-text"
         data-invalid={false}
+        id="test-id"
       >
         assistiveText
       </div>
@@ -164,90 +114,6 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -259,8 +125,37 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -301,12 +196,15 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           <div
             style={
@@ -319,7 +217,7 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
           </div>
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -329,90 +227,6 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector Default 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text3);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -424,8 +238,35 @@ exports[`Storybook Tests react/DropdownSelector Default 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        />
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -466,17 +307,18 @@ exports[`Storybook Tests react/DropdownSelector Default 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
-        >
-          Placeholder
-        </span>
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
+        />
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -486,90 +328,6 @@ exports[`Storybook Tests react/DropdownSelector Default 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -582,8 +340,37 @@ exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
   >
     <div
       aria-disabled={true}
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -624,18 +411,21 @@ exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         disabled={true}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 1
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -645,90 +435,6 @@ exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -740,8 +446,37 @@ exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -793,17 +528,20 @@ exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 2 (disabled)
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -813,90 +551,6 @@ exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -910,8 +564,37 @@ exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -953,17 +636,20 @@ exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 1
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -1005,95 +691,6 @@ exports[`Storybook Tests react/DropdownSelector InModal 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:not(:disabled):not([aria-disabled]),
-.c1[aria-disabled='false'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -1105,8 +702,37 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -1147,17 +773,21 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-invalid={true}
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 1
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -1167,95 +797,6 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:not(:disabled):not([aria-disabled]),
-.c1[aria-disabled='false'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -1267,8 +808,37 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -1309,23 +879,29 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-describedby="test-id"
+        aria-invalid={true}
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 1
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
       <div
         className="charcoal-text-field-assistive-text"
         data-invalid={true}
+        id="test-id"
       >
         assistiveText
       </div>
@@ -1335,90 +911,6 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector Label 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -1430,13 +922,14 @@ exports[`Storybook Tests react/DropdownSelector Label 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
       <div
         className="charcoal-field-label-root"
       >
         <label
           className="charcoal-field-label"
+          id="test-id"
         >
           Label
         </label>
@@ -1486,17 +979,20 @@ exports[`Storybook Tests react/DropdownSelector Label 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 1
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -1506,90 +1002,6 @@ exports[`Storybook Tests react/DropdownSelector Label 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -1601,8 +1013,37 @@ exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -1643,17 +1084,20 @@ exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -1663,95 +1107,6 @@ exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:not(:disabled):not([aria-disabled]),
-.c1[aria-disabled='false'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -1763,13 +1118,14 @@ exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
       <div
         className="charcoal-field-label-root"
       >
         <label
           className="charcoal-field-label"
+          id="test-id"
         >
           Label
         </label>
@@ -1824,17 +1180,20 @@ exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 1
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -1844,90 +1203,6 @@ exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector Section 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -1939,8 +1214,37 @@ exports[`Storybook Tests react/DropdownSelector Section 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
+      <div
+        className="charcoal-field-label-root"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="charcoal-field-label"
+          id="test-id"
+        >
+          label
+        </label>
+        <div
+          className="charcoal-field-label-sub-label"
+        >
+          <span />
+        </div>
+      </div>
       <div
         aria-hidden="true"
         style={
@@ -1996,17 +1300,20 @@ exports[`Storybook Tests react/DropdownSelector Section 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Banana
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
@@ -2016,95 +1323,6 @@ exports[`Storybook Tests react/DropdownSelector Section 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector SubLabel 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):hover,
-.c1[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c1:not(:disabled):not([aria-disabled]),
-.c1[aria-disabled='false'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c2 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c3 {
-  color: var(--charcoal-text2);
-}
-
 <div
   data-dark={false}
 >
@@ -2116,13 +1334,14 @@ exports[`Storybook Tests react/DropdownSelector SubLabel 1`] = `
     }
   >
     <div
-      className="c0"
+      className="charcoal-dropdown-selector-root"
     >
       <div
         className="charcoal-field-label-root"
       >
         <label
           className="charcoal-field-label"
+          id="test-id"
         >
           Label
         </label>
@@ -2174,17 +1393,20 @@ exports[`Storybook Tests react/DropdownSelector SubLabel 1`] = `
         </select>
       </div>
       <button
-        className="c1"
+        aria-labelledby="test-id"
+        className="charcoal-dropdown-selector-button"
+        data-active={false}
         onClick={[Function]}
         type="button"
       >
         <span
-          className="c2"
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={false}
         >
           Option 1
         </span>
         <pixiv-icon
-          class="c3"
+          class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
         />
       </button>
diff --git a/packages/react/src/components/DropdownSelector/index.css b/packages/react/src/components/DropdownSelector/index.css
new file mode 100644
index 000000000..0a0fc9298
--- /dev/null
+++ b/packages/react/src/components/DropdownSelector/index.css
@@ -0,0 +1,84 @@
+.charcoal-dropdown-selector-root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
+  width: 100%;
+}
+
+.charcoal-dropdown-selector-root[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.charcoal-dropdown-selector-button {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  gap: 4px;
+
+  padding-right: 8px;
+  padding-left: 8px;
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+
+  transition: 0.2s box-shadow, 0.2s background-color;
+}
+
+.charcoal-dropdown-selector-button:disabled {
+  cursor: default;
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
+.charcoal-dropdown-selector-button:not(:disabled):active {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.charcoal-dropdown-selector-button[aria-invalid='true'],
+.charcoal-dropdown-selector-button:not(
+    :disabled
+  )[aria-invalid='true']:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-ui-dropdown-selector-text {
+  text-align: left;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
+  color: var(--charcoal-text3);
+}
+
+.charcoal-ui-dropdown-selector-icon {
+  color: var(--charcoal-text2);
+}
diff --git a/packages/react/src/components/DropdownSelector/index.story.tsx b/packages/react/src/components/DropdownSelector/index.story.tsx
index 364198691..48c92b469 100644
--- a/packages/react/src/components/DropdownSelector/index.story.tsx
+++ b/packages/react/src/components/DropdownSelector/index.story.tsx
@@ -25,8 +25,6 @@ export const Default: StoryObj<typeof DropdownSelector> = {
           {...args}
           onChange={setSelected}
           value={args.value ? args.value : selected}
-          placeholder="Placeholder"
-          label="Label"
         >
           <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
           <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
@@ -164,7 +162,6 @@ export const RequiredText: StoryObj<typeof DropdownSelector> = {
       <div style={{ width: 288 }}>
         <DropdownSelector
           value={selected}
-          invalid
           onChange={setSelected}
           label="Label"
           showLabel
@@ -187,7 +184,6 @@ export const SubLabel: StoryObj<typeof DropdownSelector> = {
       <div style={{ width: 288 }}>
         <DropdownSelector
           value={selected}
-          invalid
           onChange={setSelected}
           label="Label"
           showLabel
diff --git a/packages/react/src/components/DropdownSelector/index.tsx b/packages/react/src/components/DropdownSelector/index.tsx
index 2d85870a1..fa8f16a01 100644
--- a/packages/react/src/components/DropdownSelector/index.tsx
+++ b/packages/react/src/components/DropdownSelector/index.tsx
@@ -1,15 +1,16 @@
+import './index.css'
+
 import React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'
-import styled, { css } from 'styled-components'
-import { disabledSelector } from '@charcoal-ui/utils'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
 import { DropdownPopover } from './DropdownPopover'
 import { findPreviewRecursive } from './utils/findPreviewRecursive'
 import MenuList, { MenuListChildren } from './MenuList'
-import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 import { getValuesRecursive } from './MenuList/internals/getValuesRecursive'
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
 import { AssistiveText } from '../TextField/AssistiveText'
+import { useClassNames } from '../../_lib/useClassNames'
+import { useId } from '@react-aria/utils'
 
 export type DropdownSelectorProps = {
   label: string
@@ -28,12 +29,12 @@ export type DropdownSelectorProps = {
   name?: string
   children: MenuListChildren
   onChange: (value: string) => void
+  className?: string
 }
 
-const defaultRequiredText = '*必須'
-
 export default function DropdownSelector({
   onChange,
+  showLabel = false,
   ...props
 }: DropdownSelectorProps) {
   const triggerRef = useRef<HTMLButtonElement>(null)
@@ -56,16 +57,24 @@ export default function DropdownSelector({
     [onChange]
   )
 
+  const labelId = useId()
+  const describedbyId = useId()
+
+  const classNames = useClassNames(
+    'charcoal-dropdown-selector-root',
+    props.className
+  )
+
   return (
-    <DropdownSelectorRoot aria-disabled={props.disabled}>
-      {props.showLabel === true && (
-        <FieldLabel
-          label={props.label}
-          required={props.required}
-          requiredText={props.requiredText ?? defaultRequiredText}
-          subLabel={props.subLabel}
-        />
-      )}
+    <div className={classNames} aria-disabled={props.disabled}>
+      <FieldLabel
+        id={labelId}
+        label={props.label}
+        required={props.required}
+        requiredText={props.requiredText}
+        subLabel={props.subLabel}
+        {...(!showLabel ? visuallyHiddenProps : {})}
+      />
       <div {...visuallyHiddenProps} aria-hidden="true">
         <select
           name={props.name}
@@ -86,8 +95,13 @@ export default function DropdownSelector({
           })}
         </select>
       </div>
-      <DropdownButton
-        invalid={props.invalid}
+      <button
+        className="charcoal-dropdown-selector-button"
+        aria-labelledby={labelId}
+        aria-invalid={props.invalid}
+        aria-describedby={
+          props.assistiveText !== undefined ? describedbyId : undefined
+        }
         disabled={props.disabled}
         onClick={() => {
           if (props.disabled === true) return
@@ -95,13 +109,16 @@ export default function DropdownSelector({
         }}
         ref={triggerRef}
         type="button"
-        $active={isOpen}
+        data-active={isOpen}
       >
-        <DropdownButtonText $isText3={isPlaceholder}>
+        <span
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={isPlaceholder}
+        >
           {isPlaceholder ? props.placeholder : preview}
-        </DropdownButtonText>
-        <DropdownButtonIcon name="16/Menu" />
-      </DropdownButton>
+        </span>
+        <Icon className="charcoal-ui-dropdown-selector-icon" name="16/Menu" />
+      </button>
       {isOpen && (
         <DropdownPopover
           isOpen={isOpen}
@@ -121,89 +138,10 @@ export default function DropdownSelector({
         </DropdownPopover>
       )}
       {props.assistiveText !== undefined && (
-        <AssistiveText data-invalid={props.invalid === true}>
+        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>
           {props.assistiveText}
         </AssistiveText>
       )}
-    </DropdownSelectorRoot>
+    </div>
   )
 }
-
-const DropdownSelectorRoot = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-
-  ${disabledSelector} {
-    cursor: default;
-    opacity: 0.32;
-  }
-`
-
-const DropdownButton = styled.button<{ invalid?: boolean; $active?: boolean }>`
-  display: grid;
-  grid-template-columns: 1fr auto;
-  justify-content: space-between;
-  align-items: center;
-
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-
-  ${disabledSelector} {
-    cursor: default;
-  }
-
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-
-  transition: 0.2s box-shadow, 0.2s background-color;
-
-  &:not(:disabled):not([aria-disabled]),
-  &[aria-disabled='false'] {
-    ${focusVisibleFocusRingCss}
-    ${({ $active }) =>
-      $active === true
-        ? css`
-            background-color: var(--charcoal-surface3-press);
-          `
-        : css`
-            &:hover {
-              background-color: var(--charcoal-surface3-hover);
-            }
-            &:active {
-              background-color: var(--charcoal-surface3-press);
-            }
-          `}
-  }
-
-  ${({ invalid }) =>
-    invalid === true &&
-    css`
-      &:not(:disabled):not([aria-disabled]),
-      &[aria-disabled='false'] {
-        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-      }
-    `}
-`
-
-const DropdownButtonText = styled.span<{ $isText3: boolean }>`
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-${(p) => (p.$isText3 ? 'text3' : 'text2')});
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const DropdownButtonIcon = styled(Icon)`
-  color: var(--charcoal-text2);
-`
diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
index ae8661742..d44df2a08 100644
--- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
@@ -1,90 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
-.c2 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c2:disabled,
-.c2[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c3 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c3:disabled,
-.c3[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus,
-.c3[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3:not(:disabled):not([aria-disabled]):hover,
-.c3[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c3:not(:disabled):not([aria-disabled]):active,
-.c3[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c4 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c5 {
-  color: var(--charcoal-text2);
-}
-
 .c0 {
   display: grid;
   gap: 24px;
@@ -259,13 +175,14 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
               className="charcoal-modal-align"
             >
               <div
-                className="c2"
+                className="charcoal-dropdown-selector-root"
               >
                 <div
                   className="charcoal-field-label-root"
                 >
                   <label
                     className="charcoal-field-label"
+                    id="test-id"
                   >
                     Fruits
                   </label>
@@ -315,17 +232,20 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
                   </select>
                 </div>
                 <button
-                  className="c3"
+                  aria-labelledby="test-id"
+                  className="charcoal-dropdown-selector-button"
+                  data-active={false}
                   onClick={[Function]}
                   type="button"
                 >
                   <span
-                    className="c4"
+                    className="charcoal-ui-dropdown-selector-text"
+                    data-placeholder={false}
                   >
                     Apple
                   </span>
                   <pixiv-icon
-                    class="c5"
+                    class="charcoal-ui-dropdown-selector-icon"
                     name="16/Menu"
                   />
                 </button>
@@ -493,90 +413,6 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
 `;
 
 exports[`Storybook Tests react/Modal Default 1`] = `
-.c2 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-  width: 100%;
-}
-
-.c2:disabled,
-.c2[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c3 {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow,0.2s background-color;
-  transition: 0.2s box-shadow,0.2s background-color;
-}
-
-.c3:disabled,
-.c3[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus,
-.c3[aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3:not(:disabled):not([aria-disabled]):hover,
-.c3[aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c3:not(:disabled):not([aria-disabled]):active,
-.c3[aria-disabled='false']:active {
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c4 {
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c5 {
-  color: var(--charcoal-text2);
-}
-
 .c0 {
   display: grid;
   gap: 24px;
@@ -743,13 +579,14 @@ exports[`Storybook Tests react/Modal Default 1`] = `
               className="charcoal-modal-align"
             >
               <div
-                className="c2"
+                className="charcoal-dropdown-selector-root"
               >
                 <div
                   className="charcoal-field-label-root"
                 >
                   <label
                     className="charcoal-field-label"
+                    id="test-id"
                   >
                     Fruits
                   </label>
@@ -799,17 +636,20 @@ exports[`Storybook Tests react/Modal Default 1`] = `
                   </select>
                 </div>
                 <button
-                  className="c3"
+                  aria-labelledby="test-id"
+                  className="charcoal-dropdown-selector-button"
+                  data-active={false}
                   onClick={[Function]}
                   type="button"
                 >
                   <span
-                    className="c4"
+                    className="charcoal-ui-dropdown-selector-text"
+                    data-placeholder={false}
                   >
                     Apple
                   </span>
                   <pixiv-icon
-                    class="c5"
+                    class="charcoal-ui-dropdown-selector-icon"
                     name="16/Menu"
                   />
                 </button>