# Select

A single-choice form control whose trigger opens a mobile option sheet and mirrors the committed value into form submission.

Version: 0.2.0-preview.1 (preview)
Content digest: 70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721
Contract kind: source-derived
Source: packages/design-system/src/components/forms/Select/Select.tsx

## Guidance

{
  "summary": "A single-choice form control whose trigger opens a mobile option sheet and mirrors the committed value into form submission.",
  "guidance": [
    {
      "heading": "Overview",
      "body": "A form control for picking **one** value from a short, known list. The trigger opens a\nnative-feeling bottom sheet (`BottomSheet` + `Menu`) and submits a hidden `<input>`."
    },
    {
      "heading": "When to use",
      "body": "Reach for `Select` when the choice is a single required value drawn from a short, fixed set —\na preferred contact method, a state, a category. It is the mobile equivalent of a `<select>`:\nthe options stay hidden until tapped.\n\n-   List long enough that you'd want to type to narrow it? Use `Autocomplete` — it filters as you type.\n-   Want every option visible inline without opening a sheet? Use `RadioGroup` (or `SegmentedControl` for 2–4).\n-   Just need a trigger + floating panel with no form-value semantics? Use `Dropdown` with a `Menu`.\n\nIn-app it backs the data-removal profile fields (`FormField.tsx`) and the exposures broker filter\n(`BrokerListSection.tsx`). Pair it with `Field` for a label and validation copy — the Field's\n`error` turns this trigger red on its own; `invalid` is the escape hatch outside a `Field`."
    }
  ],
  "usage": [],
  "examples": [],
  "source": "packages/design-system/src/components/forms/Select/Select.mdx",
  "status": "local-preview",
  "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification."
}

## Contract and public API

```json
{
  "props": [
    {
      "name": "value",
      "type": "string",
      "declared_type": "string",
      "required": true,
      "description": "Value of the selected option; a value matching no option shows the placeholder.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 29
      }
    },
    {
      "name": "options",
      "type": "SelectOption[]",
      "declared_type": "SelectOption[]",
      "required": true,
      "description": "Choices in the order the sheet lists them. An empty array opens an empty sheet.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 31
      }
    },
    {
      "name": "onChange",
      "type": "((value: string) => void) | undefined",
      "declared_type": "(value: string) => void",
      "required": false,
      "description": "Called with the chosen value, just before the sheet closes.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 33
      }
    },
    {
      "name": "placeholder",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Trigger text when nothing is selected. Defaults to `Select an option`.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 35
      },
      "default": "'Select an option'",
      "default_kind": "source-expression"
    },
    {
      "name": "sheetTitle",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Title shown in the option sheet. Falls back to `ariaLabel` or placeholder.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 37
      }
    },
    {
      "name": "surface",
      "type": "SelectSurface | undefined",
      "declared_type": "SelectSurface",
      "required": false,
      "description": "Container background treatment.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 39
      },
      "values": [
        "default",
        "raised"
      ],
      "values_complete": true,
      "default": "'default'",
      "default_kind": "source-expression"
    },
    {
      "name": "disabled",
      "type": "boolean | undefined",
      "declared_type": "boolean",
      "required": false,
      "description": "Blocks the trigger from opening the sheet.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 41
      },
      "values": [
        false,
        true
      ],
      "values_complete": true
    },
    {
      "name": "required",
      "type": "boolean | undefined",
      "declared_type": "boolean",
      "required": false,
      "description": "Announces the field as required to assistive tech. The hidden input is barred from constraint validation, so this cannot block a submit.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 43
      },
      "values": [
        false,
        true
      ],
      "values_complete": true
    },
    {
      "name": "ariaLabel",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Accessible name when no visible label is associated with the field.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 45
      }
    },
    {
      "name": "haptic",
      "type": "HapticFeedback | undefined",
      "declared_type": "HapticFeedback",
      "required": false,
      "description": "Haptic feedback for value changes. Defaults to `true` (`selection`).",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 47
      },
      "values": [
        "error",
        "heavy",
        "light",
        "medium",
        "selection",
        "success",
        "warning",
        false,
        true
      ],
      "values_complete": true,
      "default": "true",
      "default_kind": "source-expression"
    },
    {
      "name": "name",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Field name for the hidden input that carries `value` into a form submit.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 49
      }
    },
    {
      "name": "onFocus",
      "type": "(() => void) | undefined",
      "declared_type": "() => void",
      "required": false,
      "description": "Called when the trigger button takes focus; rows inside the sheet do not report focus.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 51
      }
    },
    {
      "name": "onBlur",
      "type": "(() => void) | undefined",
      "declared_type": "() => void",
      "required": false,
      "description": "Called when the trigger button loses focus.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 53
      }
    },
    {
      "name": "className",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 54
      }
    },
    {
      "name": "style",
      "type": "React.CSSProperties | undefined",
      "declared_type": "React.CSSProperties",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 55
      }
    },
    {
      "name": "testId",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Test id for the trigger; the sheet and its option rows derive from it.",
      "source": {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 57
      }
    },
    {
      "name": "id",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "DOM id the control renders, which the Field's label points at.",
      "source": {
        "path": "packages/design-system/src/hooks/FieldContext.ts",
        "line": 22
      }
    },
    {
      "name": "invalid",
      "type": "boolean | undefined",
      "declared_type": "boolean",
      "required": false,
      "description": "Paints the invalid treatment and announces the control as invalid. A Field supplies\nthis from its own `error`; set it directly only for a control with no Field around it.",
      "source": {
        "path": "packages/design-system/src/hooks/FieldContext.ts",
        "line": 31
      },
      "values": [
        false,
        true
      ],
      "values_complete": true
    },
    {
      "name": "ariaDescribedBy",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Ids of the helper or error copy describing the control, supplied by a parent Field.",
      "source": {
        "path": "packages/design-system/src/hooks/FieldContext.ts",
        "line": 33
      }
    },
    {
      "name": "ariaLabelledBy",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Id of the visible label naming the control, supplied by a parent Field.",
      "source": {
        "path": "packages/design-system/src/hooks/FieldContext.ts",
        "line": 35
      }
    }
  ],
  "prop_shapes": {},
  "api": {
    "method": "typescript-type-checker",
    "typescript_version": "5.9.3",
    "public_export": "Select",
    "public_path": "Select",
    "import_path": "@cloakedinc/design-system",
    "root_kind": "component",
    "entrypoints": [
      {
        "name": "Select",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/forms/Select/Select.tsx",
          "line": 63
        },
        "props_type": "SelectProps",
        "props": [
          {
            "name": "value",
            "type": "string",
            "declared_type": "string",
            "required": true,
            "description": "Value of the selected option; a value matching no option shows the placeholder.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 29
            }
          },
          {
            "name": "options",
            "type": "SelectOption[]",
            "declared_type": "SelectOption[]",
            "required": true,
            "description": "Choices in the order the sheet lists them. An empty array opens an empty sheet.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 31
            }
          },
          {
            "name": "onChange",
            "type": "((value: string) => void) | undefined",
            "declared_type": "(value: string) => void",
            "required": false,
            "description": "Called with the chosen value, just before the sheet closes.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 33
            }
          },
          {
            "name": "placeholder",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Trigger text when nothing is selected. Defaults to `Select an option`.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 35
            },
            "default": "'Select an option'",
            "default_kind": "source-expression"
          },
          {
            "name": "sheetTitle",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Title shown in the option sheet. Falls back to `ariaLabel` or placeholder.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 37
            }
          },
          {
            "name": "surface",
            "type": "SelectSurface | undefined",
            "declared_type": "SelectSurface",
            "required": false,
            "description": "Container background treatment.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 39
            },
            "values": [
              "default",
              "raised"
            ],
            "values_complete": true,
            "default": "'default'",
            "default_kind": "source-expression"
          },
          {
            "name": "disabled",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Blocks the trigger from opening the sheet.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 41
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          },
          {
            "name": "required",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Announces the field as required to assistive tech. The hidden input is barred from constraint validation, so this cannot block a submit.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 43
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          },
          {
            "name": "ariaLabel",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Accessible name when no visible label is associated with the field.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 45
            }
          },
          {
            "name": "haptic",
            "type": "HapticFeedback | undefined",
            "declared_type": "HapticFeedback",
            "required": false,
            "description": "Haptic feedback for value changes. Defaults to `true` (`selection`).",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 47
            },
            "values": [
              "error",
              "heavy",
              "light",
              "medium",
              "selection",
              "success",
              "warning",
              false,
              true
            ],
            "values_complete": true,
            "default": "true",
            "default_kind": "source-expression"
          },
          {
            "name": "name",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Field name for the hidden input that carries `value` into a form submit.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 49
            }
          },
          {
            "name": "onFocus",
            "type": "(() => void) | undefined",
            "declared_type": "() => void",
            "required": false,
            "description": "Called when the trigger button takes focus; rows inside the sheet do not report focus.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 51
            }
          },
          {
            "name": "onBlur",
            "type": "(() => void) | undefined",
            "declared_type": "() => void",
            "required": false,
            "description": "Called when the trigger button loses focus.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 53
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 54
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 55
            }
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Test id for the trigger; the sheet and its option rows derive from it.",
            "source": {
              "path": "packages/design-system/src/components/forms/Select/Select.tsx",
              "line": 57
            }
          },
          {
            "name": "id",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "DOM id the control renders, which the Field's label points at.",
            "source": {
              "path": "packages/design-system/src/hooks/FieldContext.ts",
              "line": 22
            }
          },
          {
            "name": "invalid",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Paints the invalid treatment and announces the control as invalid. A Field supplies\nthis from its own `error`; set it directly only for a control with no Field around it.",
            "source": {
              "path": "packages/design-system/src/hooks/FieldContext.ts",
              "line": 31
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          },
          {
            "name": "ariaDescribedBy",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Ids of the helper or error copy describing the control, supplied by a parent Field.",
            "source": {
              "path": "packages/design-system/src/hooks/FieldContext.ts",
              "line": 33
            }
          },
          {
            "name": "ariaLabelledBy",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Id of the visible label naming the control, supplied by a parent Field.",
            "source": {
              "path": "packages/design-system/src/hooks/FieldContext.ts",
              "line": 35
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      }
    ],
    "type_sources": [
      {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 11,
        "name": "SelectSurface",
        "code": "export type SelectSurface = 'default' | 'raised';"
      },
      {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 13,
        "name": "SelectOption",
        "code": "export interface SelectOption {\n    /** Option value submitted by the form. */\n    value: string;\n    label: string;\n    /** Optional leading content, usually an `Icon`. */\n    leading?: React.ReactNode;\n    /** Prevents this option from being selected. */\n    disabled?: boolean;\n}"
      },
      {
        "path": "packages/design-system/src/components/forms/Select/Select.tsx",
        "line": 27,
        "name": "SelectProps",
        "code": "export interface SelectProps extends FieldControlProps {\n    /** Value of the selected option; a value matching no option shows the placeholder. */\n    value: string;\n    /** Choices in the order the sheet lists them. An empty array opens an empty sheet. */\n    options: SelectOption[];\n    /** Called with the chosen value, just before the sheet closes. */\n    onChange?: (value: string) => void;\n    /** Trigger text when nothing is selected. Defaults to `Select an option`. */\n    placeholder?: string;\n    /** Title shown in the option sheet. Falls back to `ariaLabel` or placeholder. */\n    sheetTitle?: string;\n    /** Container background treatment. */\n    surface?: SelectSurface;\n    /** Blocks the trigger from opening the sheet. */\n    disabled?: boolean;\n    /** Announces the field as required to assistive tech. The hidden input is barred from constraint validation, so this cannot block a submit. */\n    required?: boolean;\n    /** Accessible name when no visible label is associated with the field. */\n    ariaLabel?: string;\n    /** Haptic feedback for value changes. Defaults to `true` (`selection`). */\n    haptic?: HapticFeedback;\n    /** Field name for the hidden input that carries `value` into a form submit. */\n    name?: string;\n    /** Called when the trigger button takes focus; rows inside the sheet do not report focus. */\n    onFocus?: () => void;\n    /** Called when the trigger button loses focus. */\n    onBlur?: () => void;\n    className?: string;\n    style?: React.CSSProperties;\n    /** Test id for the trigger; the sheet and its option rows derive from it. */\n    testId?: string;\n}"
      },
      {
        "path": "packages/design-system/src/hooks/FieldContext.ts",
        "line": 20,
        "name": "FieldControlProps",
        "code": "export interface FieldControlProps {\n    /** DOM id the control renders, which the Field's label points at. */\n    id?: string;\n    /** Blocks interaction and dims the control. */\n    disabled?: boolean;\n    /** Marks the control required for native form semantics. */\n    required?: boolean;\n    /**\n     * Paints the invalid treatment and announces the control as invalid. A Field supplies\n     * this from its own `error`; set it directly only for a control with no Field around it.\n     */\n    invalid?: boolean;\n    /** Ids of the helper or error copy describing the control, supplied by a parent Field. */\n    ariaDescribedBy?: string;\n    /** Id of the visible label naming the control, supplied by a parent Field. */\n    ariaLabelledBy?: string;\n}"
      },
      {
        "path": "packages/design-system/src/tokens/CdsHaptic.ts",
        "line": 6,
        "name": "HapticFeedback",
        "code": "export type HapticFeedback = boolean | HapticType;"
      },
      {
        "path": "packages/design-system/src/tokens/HapticType.ts",
        "line": 2,
        "name": "HapticType",
        "code": "export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error' | 'selection';"
      }
    ],
    "defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source."
  },
  "spec": {
    "$schema": "../../../specs/component-spec.schema.json",
    "identity": {
      "name": "Select",
      "status": "preview",
      "version": "2.0.0",
      "summary": "A single-choice form control whose trigger opens a mobile option sheet and mirrors the committed value into form submission."
    },
    "parts": [
      {
        "id": "root",
        "label": "Root",
        "description": "Stacks the hidden form value and the visible trigger."
      },
      {
        "id": "form-value",
        "label": "Form value",
        "description": "Hidden native input carrying name, value, disabled, and required state."
      },
      {
        "id": "trigger",
        "label": "Trigger",
        "description": "Displays the placeholder or selected label and opens the option dialog."
      },
      {
        "id": "trigger-label",
        "label": "Trigger label",
        "description": "Truncates the current option label without displacing the affordance."
      },
      {
        "id": "chevron",
        "label": "Chevron",
        "description": "Trailing visual indicating that the trigger reveals choices."
      },
      {
        "id": "sheet",
        "label": "Option sheet",
        "description": "Modal surface containing the single-select Menu."
      },
      {
        "id": "option",
        "label": "Option",
        "description": "Menu row with optional leading content, disabled state, and selected check."
      }
    ],
    "allowedDesignChoices": {
      "variants": {
        "sheet": {
          "label": "Sheet",
          "description": "The form trigger presents one short, fixed choice list in a modal sheet."
        }
      },
      "sizes": {},
      "surfaces": {
        "default": {
          "label": "Default",
          "description": "Uses the semantic input container."
        },
        "raised": {
          "label": "Raised",
          "description": "Uses the raised surface when placed directly on the page canvas."
        }
      }
    },
    "variants": [
      {
        "id": "sheet",
        "label": "Sheet",
        "description": "Single-choice form trigger backed by a modal Menu.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      }
    ],
    "sizes": [],
    "measurements": [
      {
        "id": "trigger-height",
        "label": "Trigger height",
        "kind": "exact",
        "token": "--cds-size-56",
        "value": 56,
        "unit": "px",
        "appliesTo": [
          "trigger"
        ]
      },
      {
        "id": "trigger-leading-padding",
        "label": "Trigger leading padding",
        "kind": "exact",
        "token": "--cds-space-20",
        "value": 20,
        "unit": "px",
        "appliesTo": [
          "trigger",
          "trigger-label"
        ]
      },
      {
        "id": "trigger-trailing-padding",
        "label": "Trigger trailing padding",
        "kind": "exact",
        "token": "--cds-space-20",
        "value": 20,
        "unit": "px",
        "appliesTo": [
          "trigger",
          "chevron"
        ]
      }
    ],
    "layout": {
      "alignment": "Trigger label remains leading and flexible while the chevron remains trailing.",
      "flow": "Hidden form value and visible trigger share one root; the trigger presents a modal list of options.",
      "notes": [
        "Use RadioGroup when all choices should remain visible.",
        "Use Autocomplete when a long or dynamic list needs type-to-filter."
      ]
    },
    "typographyAndColor": {
      "typography": [
        {
          "label": "Trigger label",
          "description": "Use the body ramp for placeholder and selected option text.",
          "token": "--cds-type-body-size"
        }
      ],
      "colors": [
        {
          "label": "Default surface",
          "description": "Use the semantic input container.",
          "token": "--cds-input-container"
        },
        {
          "label": "Raised surface",
          "description": "Use the raised semantic surface.",
          "token": "--cds-bg-surface"
        },
        {
          "label": "Selected label",
          "description": "Use primary text emphasis for the committed value.",
          "token": "--cds-text-primary"
        },
        {
          "label": "Placeholder and chevron",
          "description": "Use secondary text emphasis before selection and for the affordance.",
          "token": "--cds-text-secondary"
        },
        {
          "label": "Validation",
          "description": "Use the solid danger role for invalid border and copy.",
          "token": "--cds-status-danger-solid"
        }
      ]
    },
    "states": [
      {
        "id": "empty",
        "label": "Empty",
        "description": "Shows placeholder copy and an empty form value."
      },
      {
        "id": "selected",
        "label": "Selected",
        "description": "Shows the current option label and selected option in the sheet."
      },
      {
        "id": "open",
        "label": "Open",
        "description": "Exposes expanded state and presents the labelled option dialog."
      },
      {
        "id": "invalid",
        "label": "Invalid",
        "description": "Shows the danger border and invalid semantics. The corrective message belongs to the enclosing Field."
      },
      {
        "id": "disabled",
        "label": "Disabled",
        "description": "Disables form submission, opening, focus interaction, and option changes."
      }
    ],
    "behavior": [
      {
        "label": "Open",
        "description": "Present the option sheet only from an enabled trigger."
      },
      {
        "label": "Select",
        "description": "Emit the next option value, close the sheet, and mirror the controlled value into the hidden input."
      },
      {
        "label": "Form submission",
        "description": "Submit the controlled string under the optional name; required surfaces as aria-required on the trigger only, since the hidden input skips native constraint validation."
      }
    ],
    "accessibility": [
      {
        "label": "Trigger name and state",
        "description": "Associate a visible Field label or accessible label and expose dialog popup, expanded, required, invalid, and described-by states."
      },
      {
        "label": "Option sheet",
        "description": "Name the modal and its single-select listbox from the field or explicit sheet title."
      },
      {
        "label": "Options",
        "description": "Expose selected and disabled state for every option."
      }
    ],
    "contentAdaptation": [
      {
        "label": "Long selected labels",
        "description": "Truncate the one-line trigger label while allowing full labels to wrap in option rows."
      },
      {
        "label": "Placeholder",
        "description": "Name the choice being requested instead of repeating a generic Select instruction."
      }
    ],
    "motionHaptics": {
      "motion": [
        {
          "label": "Sheet presentation",
          "description": "Delegate opening and dismissal motion to Modal; selection closes the sheet without animating the trigger geometry."
        }
      ],
      "haptics": [
        {
          "label": "Selection feedback",
          "description": "Request the selection haptic after an enabled option is chosen."
        }
      ]
    },
    "platformDifferences": [
      {
        "platforms": [
          "web"
        ],
        "description": "Web mirrors the selected value into a hidden input and uses an ARIA dialog/listbox composition rather than a native HTML select.",
        "rationale": "The mobile bottom-sheet interaction is the cross-platform product pattern, while the hidden input preserves web form submission."
      }
    ]
  },
  "platforms": {
    "implemented": [
      "web"
    ],
    "native": "Imported design guidance only; no native implementation or parity verification in this preview.",
    "react": {
      "implementation": "local",
      "status": "preview",
      "parity": "web-reference"
    },
    "vue": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    },
    "swift": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    },
    "kotlin": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    }
  },
  "tokens": [
    {
      "name": "--cds-size-56",
      "light": "56px",
      "dark": "56px"
    },
    {
      "name": "--cds-space-20",
      "light": "20px",
      "dark": "20px"
    },
    {
      "name": "--cds-type-body-size",
      "light": "1rem",
      "dark": "1rem"
    },
    {
      "name": "--cds-input-container",
      "light": "#f3f1ed",
      "dark": "#232321"
    },
    {
      "name": "--cds-bg-surface",
      "light": "#ffffff",
      "dark": "#1b1b18"
    },
    {
      "name": "--cds-text-primary",
      "light": "#141410",
      "dark": "#f3f1ed"
    },
    {
      "name": "--cds-text-secondary",
      "light": "#646260",
      "dark": "#ffffff99"
    },
    {
      "name": "--cds-status-danger-solid",
      "light": "#b83100",
      "dark": "#b83100"
    }
  ],
  "review": {
    "local_status": "not-reviewed",
    "source_approval": null,
    "imported_spec_status": "approved",
    "spec_origin": "imported-adapted",
    "local_spec_source_status": "approved",
    "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract."
  },
  "missing_facts": [
    {
      "code": "human-review-pending",
      "detail": "This local preview has no recorded human design or engineering sign-off."
    },
    {
      "code": "platform-parity-unverified",
      "detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified."
    },
    {
      "code": "figma-mapping-unverified",
      "detail": "No current component-level Figma node and immutable revision have been verified for this contract."
    }
  ]
}
```

## Visual states

- [Playground](/storybook/iframe.html?id=cloaked-design-system-forms-select--playground&viewMode=story) | export: Playground | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [Selected](/storybook/iframe.html?id=cloaked-design-system-forms-select--selected&viewMode=story) | export: Selected | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [Raised On Canvas](/storybook/iframe.html?id=cloaked-design-system-forms-select--raised-on-canvas&viewMode=story) | export: RaisedOnCanvas | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [With Field](/storybook/iframe.html?id=cloaked-design-system-forms-select--with-field&viewMode=story) | export: WithField | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [Invalid In Field](/storybook/iframe.html?id=cloaked-design-system-forms-select--invalid-in-field&viewMode=story) | export: InvalidInField | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [Disabled](/storybook/iframe.html?id=cloaked-design-system-forms-select--disabled&viewMode=story) | export: Disabled | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [State Matrix](/storybook/iframe.html?id=cloaked-design-system-forms-select--state-matrix&viewMode=story) | export: StateMatrix | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [Bottom Sheet Interaction](/storybook/iframe.html?id=cloaked-design-system-forms-select--bottom-sheet-interaction&viewMode=story) | export: BottomSheetInteraction | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [Long Options](/storybook/iframe.html?id=cloaked-design-system-forms-select--long-options&viewMode=story) | export: LongOptions | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

- [Dark Theme](/storybook/iframe.html?id=cloaked-design-system-forms-select--dark-theme&viewMode=story) | export: DarkTheme | source: packages/design-system/src/components/forms/Select/Select.stories.tsx

Preview pending human sign-off. Source-derived APIs and successful checks do not certify accessibility, native parity or approval.