@workday/canvas-kit-mcp 16.1.3 → 16.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/apps/select.html +403 -264
  2. package/dist/cli.js +3 -3
  3. package/dist/cli.js.map +1 -1
  4. package/dist/index.js +3 -3
  5. package/dist/index.js.map +1 -1
  6. package/dist/lib/component-index.json +5 -5
  7. package/dist/lib/token-index.json +2 -2
  8. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -13,7 +13,7 @@ import { z as z2 } from "zod";
13
13
  // package.json
14
14
  var package_default = {
15
15
  name: "@workday/canvas-kit-mcp",
16
- version: "16.1.3",
16
+ version: "16.1.4",
17
17
  description: "MCP package for Canvas Kit",
18
18
  author: "Workday, Inc. (https://www.workday.com)",
19
19
  license: "Apache-2.0",
@@ -1558,8 +1558,8 @@ var stories_config_default = {
1558
1558
  title: "Components/Inputs/Select",
1559
1559
  storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs",
1560
1560
  mdxPath: "modules/react/select/stories/Select.mdx",
1561
- mdxProse: "# Canvas Kit Select\n\nSelect inputs allow users to choose one option from a list of items or type a matching option.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/select)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\n`Select` supports a\n[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you\npass an array of items via the `items` prop and provide a render function to display the items. The\nitems may be provided as an\n[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an\n[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).\n\n`Select` should be used in tandem with [Form Field](/components/inputs/form-field/) where the\n`Select` wraps the `FormField` element and the `FormField` element wraps the children of `Select` to\nmeet accessibility standards. This ensures the `label` text from `FormField` is attached to the\n`Select.Input` and read out as a group for voiceover.\n\n```tsx\n<Select items={options}>\n <FormField label=\"Your Label\">\n <Select.Input onChange={e => handleChange(e)} id=\"contact-select\" />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.id}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </FormField>\n</Select>\n```\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n 'Thisisalongstringwithnobreaksandwillwrap',\n];\n\nexport const Basic = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n console.log('change', event.currentTarget.value);\n setValue(event.target.value);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} onChange={handleChange} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => {\n return <Select.Item>{item}</Select.Item>;\n }}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n Selected Value: {value}\n </Flex>\n );\n};\n```\n\nOur example uses [React state](<(https://react.dev/learn/state-a-components-memory)>) to track the\nvalue of the `Select`.\n\n### Hoisted Model\n\nBy default, `Select` will create and use its own model internally. Alternatively, you may configure\nyour own model with `useSelectModel` and pass it to `Select` via the `model` prop. This pattern is\nreferred to as\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)\nand provides direct access to its `state` and `events` outside of the `Select` component.\n\nIn this example, we set up external observation of the model state and create an external button to\ntrigger an event to change the selected item.\n\n**Note: If your array of objects uses an `id` property and a `text` property there is no need to use\nthe helper functions of `getId` or `getTextValue`. The collection system and the `Select` use these\nproperties by default for keyboard navigation and selected the `id` based on the item clicked.**\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\nimport {BodyText} from '@workday/canvas-kit-react/text';\n\nconst options = [\n {text: 'E-mail', id: 'email-1'},\n {text: 'Phone', id: 'phone-2'},\n {text: 'Fax', id: 'fax-3'},\n {text: 'Mail', id: 'mail-4'},\n {text: 'Mobile Phone', id: 'mobile-phone-5'},\n];\n\nexport const HoistedModel = () => {\n const model = useSelectModel({\n items: options,\n initialSelectedIds: ['fax-3'],\n });\n\n return (\n <>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <BodyText size=\"small\">Selected Value: {model.state.selectedIds[0]}</BodyText>\n <SecondaryButton\n onClick={() => {\n model.events.select({id: 'phone-2'});\n }}\n >\n Select Phone Item\n </SecondaryButton>\n </>\n );\n};\n```\n\n### Label Position Horizontal\n\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\ninput component. By default, the orientation will be set to `vertical`.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const LabelPosition = () => {\n const model = useSelectModel({\n items: options,\n });\n\n return (\n <Flex>\n <FormField orientation=\"horizontalStart\">\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n <FormField.Hint>Choose a form of contact</FormField.Hint>\n </Select>\n </FormField.Field>\n </FormField>\n </Flex>\n );\n};\n```\n\n### Required\n\nSet the `required` prop of the wrapping `FormField` to `true` to indicate that the field is\nrequired. Labels for required fields are suffixed by a red asterisk.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Required = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField isRequired>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n Selected Value: {value}\n </Flex>\n );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop of `Select.Input` to prevent users from interacting with it.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax (disabled)',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Disabled = () => {\n const [_, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options} nonInteractiveIds={['Fax (disabled)']}>\n <FormField.Input as={Select.Input} disabled onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => (\n <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>\n {item}\n </Select.Item>\n )}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </Flex>\n );\n};\n```\n\n### Disabled Items\n\nIn order to disable items and prevent users from interacting with them:\n\n1. Set the `nonInteractiveIds` prop of `Select` to an array of disabled item `id`s. If your items\n are an array of `strings` this will be just the text value. If your items are an array of\n `objects`, this will be that value of the `id` property. This will disable interaction for those\n items and exclude them from type-ahead.\n\n2. Set the `aria-disabled` attribute of all disabled `Select.Item`s to `true`. This ensures the\n items are styled as disabled.\n\nThe following example adds the string value of the items we want disable to `nonInteractiveIds` and\nsets `aria-disabled` for the disabled items.\n\n### With Icons\n\nUse `Select.Item.Icon` to render an icon for a `Select.Item`. The `icon` prop for `Select.Item.Icon`\naccepts [system icons](/assets/system-icons/) from `@workday/canvas-system-icons-web`.\n\nIn order to render the icon for the selected item in the `Select.Input`:\n\n1. Obtain a reference to the `model` by registering your `items` with `useSelectModel`.\n2. Get the selected item:\n `const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model)`\n3. Pass the icon for the selected item to the input:\n `<Select.Input inputStartIcon={selectedItem.value.icon}>`\n\n> **Note: `data-id` on `Select.Item` must match the `id` property in your array of objects. This\n> ensures proper keyboard handling and type-ahead.**\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {cloudArrowUpIcon, cloudIcon, commentIcon, userIcon} from '@workday/canvas-system-icons-web';\n\nconst styleOverrides = {\n formfieldInputStyles: createStyles({\n width: px2rem(300),\n }),\n selectCardStyles: createStyles({\n maxHeight: px2rem(200),\n }),\n};\n\nconst customOptions = [\n {text: 'Activity Stream', id: 'activity-stream', icon: commentIcon},\n {text: 'Avatar', id: 'avatar', icon: cloudIcon},\n {text: 'Upload Cloud', id: 'upload-cloud', icon: cloudArrowUpIcon},\n {text: 'User', id: 'user', icon: userIcon},\n];\n\nexport const WithIcons = () => {\n const model = useSelectModel({\n items: customOptions,\n });\n const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model);\n return (\n <Flex>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input\n as={Select.Input}\n cs={styleOverrides.formfieldInputStyles}\n inputStartIcon={selectedItem?.value.icon}\n />\n <Select.Popper>\n <Select.Card cs={styleOverrides.selectCardStyles}>\n {model.state.items.length > 0 && (\n <Select.List>\n {item => (\n <Select.Item data-id={item.id}>\n <Select.Item.Icon icon={item.icon} />\n {item.text}\n </Select.Item>\n )}\n </Select.List>\n )}\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </Flex>\n );\n};\n```\n\n**Note: that `Select.Input` will only render an icon if an item is selected.**\n\n### Grow\n\nSet the `grow` prop of the wrapping `FormField` to `true` to configure the `Select.Input` to expand\nto the width of its container.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Grow = () => {\n const model = useSelectModel({\n items: options,\n });\n\n return (\n <Flex>\n <FormField grow>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </Flex>\n );\n};\n```\n\n### Menu Height\n\n`Select.Card` has a default maximum height of `300px` to restrict the height of the dropdown menu.\nSet its `maxHeight` prop to override this value.\n```tsx\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Box} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\n\nconst selectCardStyles = createStyles({\n maxHeight: px2rem(200),\n});\n\nconst cities = [\n 'Atlanta (United States)',\n 'Amsterdam (Europe)',\n 'Austin (United States)',\n 'Beaverton (United States)',\n 'Belfast (Europe)',\n 'Berlin (Europe)',\n 'Boston (United States)',\n 'Boulder (United States)',\n 'Chicago (United States)',\n 'Dallas (United States)',\n 'Denver (United States)',\n 'Dublin (Europe)',\n 'Irvine (United States)',\n 'Minneapolis (United States)',\n 'New York (United States)',\n 'Orlando (United States)',\n 'Palo Alto (United States)',\n 'Philadelphia (United States)',\n 'Pleasanton (United States)',\n 'Raleigh (United States)',\n 'San Francisco (United States)',\n 'San Mateo (United States)',\n 'Stockholm (Europe)',\n 'Toronto (Canada)',\n 'Victoria (Canada)',\n 'Vienna (Europe)',\n 'Warsaw (Europe)',\n 'Washington, DC (United States)',\n 'Zurich (Europe)',\n];\n\nexport const MenuHeight = () => {\n return (\n <Box>\n <FormField>\n <FormField.Label>Choose a City</FormField.Label>\n <FormField.Field>\n <Select items={cities}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card cs={selectCardStyles}>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </Box>\n );\n};\n```\n\n### Ref Forwarding\n\n`Select.Input` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will\nforward `ref` to its underlying `<input type=\"text\" role=\"combobox\">` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Select} from '@workday/canvas-kit-react/select';\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const RefForwarding = () => {\n // @ts-ignore\n const [value, setValue] = React.useState('medium');\n const ref = React.useRef(null);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n const handleClick = () => {\n if (ref && ref.current) {\n console.log(ref);\n ref.current.focus();\n }\n };\n\n return (\n <>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} ref={ref} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <PrimaryButton onClick={handleClick}>Focus Select</PrimaryButton>\n </>\n );\n};\n```\n\n### Error States\n\nSet the `error` prop of the wrapping `FormField` to `\"caution\"` or `\"error\"` to set the `Select` to\nthe caution or error state, respectively. You will also need to set the `hintId` and `hintText`\nprops on the `FormField` to meet accessibility standards. You must set an `id` attribute on the\n`Select.Input` element that matches the value of `inputId` set on the `FormField` element. These\nattributes ensure that the caution message is associated to the `Select` and read out by voiceover.\n\n**Note: The Select container component, `Select`, must wrap `FormField` to ensure `Select.Input` is\nstyled correctly.**\n\n```tsx\n<Select items={options}>\n <FormField label=\"Contact\" inputId=\"contact-id-formfield\">\n <Select.Input id=\"contact-id-formfield\" />\n ...\n </FormField>\n</Select>\n```\n\n#### Caution\n\nUse the alert state when a selection is valid but there is additional information.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Caution = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n return (\n <Flex cs={parentContainerStyles}>\n <FormField error=\"caution\">\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} id=\"alert-select\" />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n <FormField.Hint>Please choose a form of contact.</FormField.Hint>\n </Select>\n </FormField.Field>\n </FormField>\n Selected value: {value}\n </Flex>\n );\n};\n```\n\n#### Error\n\nUse the error state when the selection is no longer valid.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax (disabled)',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Error = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n return (\n <Flex cs={parentContainerStyles}>\n <FormField error=\"error\">\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options} nonInteractiveIds={['Fax (disabled)']}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => (\n <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>\n {item}\n </Select.Item>\n )}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>\n </Select>\n </FormField.Field>\n </FormField>\n Selected Value: {value}\n </Flex>\n );\n};\n```\n\n### Initial Selected Item\n\nYou can set `initialSelectedIds` to the value that you want initially selected.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n {\n id: 'b310c757b2d341f99d40d76f4d563c5b',\n descriptor: 'Arabic',\n languageCode: 'ar',\n label: 'Arabic',\n nativeLanguageName: '\u0627\u0644\u0639\u0631\u0628\u064A\u0629',\n },\n {\n id: 'a675a6b6e22d100017d7fe2a784d1255',\n descriptor: 'Bulgarian (Bulgaria)',\n languageCode: 'bg_BG',\n label: 'Bulgarian (Bulgaria)',\n nativeLanguageName: '\u0431\u044A\u043B\u0433\u0430\u0440\u0441\u043A\u0438 (\u0420\u0435\u043F\u0443\u0431\u043B\u0438\u043A\u0430 \u0411\u044A\u043B\u0433\u0430\u0440\u0438\u044F)',\n },\n {\n id: 'da594226446c11de98360015c5e6daf6',\n descriptor: 'English (United States)',\n languageCode: 'en_US',\n label: 'English (United States)',\n nativeLanguageName: 'English',\n },\n];\n\nexport const InitialSelectedItem = () => {\n const [value, setValue] = React.useState('English (United States)');\n const [id, setId] = React.useState('da594226446c11de98360015c5e6daf6');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setId(event.target.value);\n setValue(options.find(item => item.id === event.target.value).label);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select\n items={options}\n initialSelectedIds={['da594226446c11de98360015c5e6daf6']}\n getId={item => item.id}\n getTextValue={item => item.label}\n >\n <Select.Input onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <p>Id: {id}</p>\n <p>Value: {value}</p>\n </Flex>\n );\n};\n```\n\n### Placeholder\n\nYou can change the placeholder text by passing in a string value to the `placeholder` attribute on\nthe `Select.Input`.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Placeholder = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <Select.Input placeholder=\"Make a Selection\" onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => {\n return <Select.Item>{item}</Select.Item>;\n }}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n Selected Value: {value}\n </Flex>\n );\n};\n```\n\n### Fetching Dynamic Items\n\nIt's common to load items from a server call. Hoisting the `model` and setting your items on state\nallows you to pass those items to your `model`. You can leverage React state to set your items on\nload as well as displaying a placeholder indicating when items are loaded.\n\n**Note: In this case we need to use `getId` and `getTextValue` because our data doesn't have the\nproperties of `id` or `text`. Using these helper functions sets the `serverId` to be `id` and\n`label` to be `text`.**\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {useMount} from '@workday/canvas-kit-react/common';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n maxWidth: px2rem(300),\n});\n\nconst movieListItems = [\n {\n label: 'The Lion King',\n serverId: '123',\n Year: '2019',\n Runtime: '118 min',\n },\n {\n label: 'Mowgli: Legend of the Jungle',\n serverId: '234',\n Year: '2018',\n Runtime: '104 min',\n },\n {\n label: 'Doctor Strange',\n serverId: '345',\n Year: '2016',\n Runtime: '115 min',\n },\n {\n label: 'John Wick',\n Year: '2014',\n serverId: '456',\n Runtime: '101 min',\n },\n {\n label: 'The Notebook',\n serverId: '567',\n Year: '2004',\n Runtime: '123 min',\n },\n];\n\nexport const FetchingDynamicItems = () => {\n const [id, setId] = React.useState('456');\n const [moviesLists, setMoviesList] = React.useState<typeof movieListItems>([]);\n const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');\n const loadingRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n const model = useSelectModel({\n items: moviesLists,\n getTextValue: item => item.label,\n getId: item => item.serverId,\n initialSelectedIds: [id],\n });\n\n const stringValue = moviesLists.find(item => item.serverId === id)?.label || '';\n\n function loadItems() {\n setLoadingStatus('loading');\n loadingRef.current = setTimeout(() => {\n setLoadingStatus('success');\n setMoviesList(movieListItems);\n }, 1500);\n }\n\n useMount(() => {\n return () => {\n clearTimeout(loadingRef.current);\n };\n });\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Choose a Film</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input\n as={Select.Input}\n onChange={e => {\n setId(e.target.value);\n }}\n placeholder={loadingStatus}\n />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => {\n return <Select.Item>{item.label}</Select.Item>;\n }}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <div data-testid=\"selected-id\">Selected Id: {id}</div>\n <div data-testid=\"selected-value\">Selected value: {stringValue}</div>\n <PrimaryButton\n onClick={() => {\n loadItems();\n }}\n >\n Get Items\n </PrimaryButton>\n </Flex>\n );\n};\n```\n\n### Complex\n\nWhen registering items in an array of objects, it's common to have the text that is displayed to the\nuser be different than an id. In this example, `serverId` and `label` properties need to be remapped\nto `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties\n`text` and `id`, there would be no need for this.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n {serverId: 'email', label: 'E-mail'},\n {serverId: 'phone', label: 'Phone'},\n {serverId: 'fax', label: 'Fax'},\n {serverId: 'mail', label: 'Mail'},\n {serverId: 'mobile', label: 'Mobile Phone'},\n {\n serverId: 'oasis',\n label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n },\n];\n\nexport const Complex = () => {\n const [value, setValue] = React.useState('');\n const [id, setId] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setId(event.target.value);\n setValue(options.find(item => item.serverId === event.target.value)!.label);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <p>Id: {id}</p>\n <p>Value: {value}</p>\n </Flex>\n );\n};\n```\n\n**Note: By default, the identifier and text value are `id` and `text` properties respectively. If\nyour data object for each item is different, provide a `getId` or `getTextValue` function to the\nmodel config. For example:**\n\n```jsx\nconst items = [\n {\n serverId: '1',\n label: 'First Option',\n },\n];\n\n<Select items={items} getId={item => item.serverId} getTextValue={item => item.label}>\n {/* etc */}\n</Select>;\n```\n\n### Controlled\n\nThe Select can be a\n[controlled input](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)\ncomponent by passing the `value` and `onChange` to either the `<Select>` component or the\n`<Select.Input>` component. Internally, the `Select.Input` watches for changes on the `value` React\nprop as well as the `value` DOM property and will update the model accordingly.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n {serverId: 'email', label: 'E-mail'},\n {serverId: 'phone', label: 'Phone'},\n {serverId: 'fax', label: 'Fax'},\n {serverId: 'mail', label: 'Mail'},\n {serverId: 'mobile', label: 'Mobile Phone'},\n {\n serverId: 'oasis',\n label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n },\n];\n\nexport const Controlled = () => {\n const [value, setValue] = React.useState('');\n const [label, setLabel] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.currentTarget.value);\n setLabel(options.find(item => item.serverId === event.currentTarget.value)?.label || '');\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>\n <FormField.Input\n as={Select.Input}\n onChange={handleChange}\n value={value}\n name=\"contact\"\n />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <p>Id: {value}</p>\n <p>Label: {label}</p>\n <Flex cs={{gap: system.gap.md}}>\n <SecondaryButton\n onClick={e => {\n setValue('fax');\n }}\n >\n Set to \"Fax\"\n </SecondaryButton>\n <SecondaryButton\n onClick={e => {\n setValue('');\n }}\n >\n Clear\n </SecondaryButton>\n </Flex>\n </Flex>\n );\n};\n```\n\n### When to use `getId`, or `getTextValue`\n\n- `getId`: This is an optional function to return the id of an item. If not provided, the default\n function will return the `id` property from the object of each item. If you did not provide\n `items`, do not override this function. Instead provide static items via JSX. the list will create\n an internal array of items where `id` is the only property and the default `getId` will return the\n desired result. **Note: If your array of objects has a different property for `id`, like\n `serverId`, use this function to set the id.**\n\n ```tsx\n const options = [{text: 'Pizza', serverId: 'pizza-1'}, {text: 'Cheeseburger', serverId: 'cheeseburger'}]\n <Select items={options} getId={(item) => item.serverId}>\n <FormField label=\"Your Label\">\n <Select.Input onChange={e => handleChange(e)} id=\"contact-select\" />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </FormField>\n </Select>\n ```\n\n- `getTextValue`: Optional function to return the text representation of an item. If not provided,\n the default function will return the `text` property of the object of each item or an empty string\n if there is no `text` property. If you did not provide `items`, do not override this function.\n **Note: If your array of objects has a different property for `text`, like `label`, use this\n function to set the text.**\n\n ```tsx\n const options = [{label: 'Pizza', id: 'pizza-1'}, {label: 'Cheeseburger', id: 'cheeseburger'}]\n <Select items={options} getTextValue={(item) => item.label}>\n <FormField label=\"Your Label\">\n <Select.Input onChange={e => handleChange(e)} id=\"contact-select\" />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </FormField>\n </Select>\n ```\n\n### Grouped Items\n\nIn order to group items, you have to use the static API in combination of the `Menu.Group` component.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Menu} from '@workday/canvas-kit-react/menu';\nimport {Select} from '@workday/canvas-kit-react/select';\n\nconst items = [\n {\n id: 'first',\n text: 'First Item',\n },\n {\n id: 'second',\n text: 'Second Item',\n },\n {\n id: 'third',\n text: 'Third Item',\n },\n {\n id: 'fourth',\n text: 'Fourth Item',\n },\n];\n\nexport const GroupedItems = () => {\n const [selected, setSelected] = React.useState('');\n\n return (\n <>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={items} getId={item => item.id} getTextValue={item => item.text}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n <Menu.Group title=\"First Group\">\n <Select.Item data-id=\"first\">First Item</Select.Item>\n <Select.Item data-id=\"second\">Second Item</Select.Item>\n </Menu.Group>\n <Menu.Group title=\"Second Group\">\n <Select.Item data-id=\"third\">\n Third Item (with a really, really, really long label)\n </Select.Item>\n <Select.Item aria-disabled data-id=\"fourth\">\n Fourth Item\n </Select.Item>\n </Menu.Group>\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </>\n );\n};\n```\n\n### Custom Styles\n\nSelect and its subcomponents support custom styling via the `cs` prop. For more information, check\nour\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Component API\n\n## Specifications\n\n",
1562
- accessibilityProse: ""
1561
+ mdxProse: "# Canvas Kit Select\n\nSelect inputs allow users to choose one option from a list of items or type a matching option.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/select)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\n`Select` supports a [dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items)\nwhere you pass an array of items via the `items` prop and provide a render function to display the\nitems. The items may be provided as an\n[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an\n[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).\n\n`Select` should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure proper\nlabel association and screen reader support. Wrap **`Select`** with **`FormField`**, and compose\n**`FormField.Input as={Select.Input}`** so the combobox receives the field label. Include\n**`Select.Popper`**, **`Select.Card`**, **`Select.List`**, and **`Select.Item`**.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n 'Thisisalongstringwithnobreaksandwillwrap',\n];\n\nexport const Basic = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n console.log('change', event.currentTarget.value);\n setValue(event.target.value);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} onChange={handleChange} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => {\n return <Select.Item>{item}</Select.Item>;\n }}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n Selected Value: {value}\n </Flex>\n );\n};\n```\n\nOur example uses [React state](<(https://react.dev/learn/state-a-components-memory)>) to track the\nvalue of the `Select`.\n\n### Hoisted Model\n\nBy default, `Select` will create and use its own model internally. Alternatively, you may configure\nyour own model with `useSelectModel` and pass it to `Select` via the `model` prop. This pattern is\nreferred to as\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)\nand provides direct access to its `state` and `events` outside of the `Select` component.\n\nIn this example, we set up external observation of the model state and create an external button to\ntrigger an event to change the selected item.\n\n**Note: If your array of objects uses an `id` property and a `text` property there is no need to use\nthe helper functions of `getId` or `getTextValue`. The collection system and the `Select` use these\nproperties by default for keyboard navigation and selected the `id` based on the item clicked.**\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\nimport {BodyText} from '@workday/canvas-kit-react/text';\n\nconst options = [\n {text: 'E-mail', id: 'email-1'},\n {text: 'Phone', id: 'phone-2'},\n {text: 'Fax', id: 'fax-3'},\n {text: 'Mail', id: 'mail-4'},\n {text: 'Mobile Phone', id: 'mobile-phone-5'},\n];\n\nexport const HoistedModel = () => {\n const model = useSelectModel({\n items: options,\n initialSelectedIds: ['fax-3'],\n });\n\n return (\n <>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <BodyText size=\"small\">Selected Value: {model.state.selectedIds[0]}</BodyText>\n <SecondaryButton\n onClick={() => {\n model.events.select({id: 'phone-2'});\n }}\n >\n Select Phone Item\n </SecondaryButton>\n </>\n );\n};\n```\n\n### Label Position Horizontal\n\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\ninput component. By default, the orientation will be set to `vertical`.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const LabelPosition = () => {\n const model = useSelectModel({\n items: options,\n });\n\n return (\n <Flex>\n <FormField orientation=\"horizontalStart\">\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n <FormField.Hint>Choose a form of contact</FormField.Hint>\n </Select>\n </FormField.Field>\n </FormField>\n </Flex>\n );\n};\n```\n\n### Required\n\nSet the `isRequired` prop of the wrapping `FormField` to `true` to indicate that the field is\nrequired. Labels for required fields are suffixed by a red asterisk.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Required = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField isRequired>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n Selected Value: {value}\n </Flex>\n );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop on **`FormField.Input as={Select.Input}`** to prevent users from interacting\nwith the combobox.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax (disabled)',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Disabled = () => {\n const [_, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options} nonInteractiveIds={['Fax (disabled)']}>\n <FormField.Input as={Select.Input} disabled onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => (\n <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>\n {item}\n </Select.Item>\n )}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </Flex>\n );\n};\n```\n\n### Disabled Items\n\nIn order to disable items and prevent users from interacting with them:\n\n1. Set the `nonInteractiveIds` prop of `Select` to an array of disabled item `id`s. If your items\n are an array of `strings` this will be just the text value. If your items are an array of\n `objects`, this will be that value of the `id` property. This will disable interaction for those\n items and exclude them from type-ahead.\n\n2. Set the `aria-disabled` attribute of all disabled `Select.Item`s to `true`. This ensures the\n items are styled as disabled.\n\nThe following example adds the string value of the items we want disable to `nonInteractiveIds` and\nsets `aria-disabled` for the disabled items.\n\n### With Icons\n\nUse `Select.Item.Icon` to render an icon for a `Select.Item`. The `icon` prop for `Select.Item.Icon`\naccepts [system icons](/assets/system-icons/) from `@workday/canvas-system-icons-web`.\n\nIn order to render the icon for the selected item on **`FormField.Input as={Select.Input}`**:\n\n1. Obtain a reference to the `model` by registering your `items` with `useSelectModel`.\n2. Get the selected item:\n `const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model)`\n3. Pass the icon for the selected item to the input:\n `<FormField.Input as={Select.Input} inputStartIcon={selectedItem?.value.icon} />`\n\n> **Note:** Dynamic `{item => <Select.Item>}` registration already uses the collection `id`. Set\n> **`data-id`** only on static **`Select.Item`** children (see [Grouped Items](#grouped-items)), and\n> keep it equal to that id (`id` or **`getId`**).\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {cloudArrowUpIcon, cloudIcon, commentIcon, userIcon} from '@workday/canvas-system-icons-web';\n\nconst styleOverrides = {\n formfieldInputStyles: createStyles({\n width: px2rem(300),\n }),\n selectCardStyles: createStyles({\n maxHeight: px2rem(200),\n }),\n};\n\nconst customOptions = [\n {text: 'Activity Stream', id: 'activity-stream', icon: commentIcon},\n {text: 'Avatar', id: 'avatar', icon: cloudIcon},\n {text: 'Upload Cloud', id: 'upload-cloud', icon: cloudArrowUpIcon},\n {text: 'User', id: 'user', icon: userIcon},\n];\n\nexport const WithIcons = () => {\n const model = useSelectModel({\n items: customOptions,\n });\n const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model);\n return (\n <Flex>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input\n as={Select.Input}\n cs={styleOverrides.formfieldInputStyles}\n inputStartIcon={selectedItem?.value.icon}\n />\n <Select.Popper>\n <Select.Card cs={styleOverrides.selectCardStyles}>\n {model.state.items.length > 0 && (\n <Select.List>\n {item => (\n <Select.Item>\n <Select.Item.Icon icon={item.icon} />\n {item.text}\n </Select.Item>\n )}\n </Select.List>\n )}\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </Flex>\n );\n};\n```\n\n**Note: that `FormField.Input as={Select.Input}` will only render an icon if an item is selected.**\n\n### Grow\n\nSet the `grow` prop of the wrapping `FormField` to `true` to configure the `Select.Input` to expand\nto the width of its container.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Grow = () => {\n const model = useSelectModel({\n items: options,\n });\n\n return (\n <Flex>\n <FormField grow>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </Flex>\n );\n};\n```\n\n### Menu Height\n\n`Select.Card` has a default maximum height of `300px` to restrict the height of the dropdown menu.\nSet its `maxHeight` prop to override this value.\n```tsx\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Box} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\n\nconst selectCardStyles = createStyles({\n maxHeight: px2rem(200),\n});\n\nconst cities = [\n 'Atlanta (United States)',\n 'Amsterdam (Europe)',\n 'Austin (United States)',\n 'Beaverton (United States)',\n 'Belfast (Europe)',\n 'Berlin (Europe)',\n 'Boston (United States)',\n 'Boulder (United States)',\n 'Chicago (United States)',\n 'Dallas (United States)',\n 'Denver (United States)',\n 'Dublin (Europe)',\n 'Irvine (United States)',\n 'Minneapolis (United States)',\n 'New York (United States)',\n 'Orlando (United States)',\n 'Palo Alto (United States)',\n 'Philadelphia (United States)',\n 'Pleasanton (United States)',\n 'Raleigh (United States)',\n 'San Francisco (United States)',\n 'San Mateo (United States)',\n 'Stockholm (Europe)',\n 'Toronto (Canada)',\n 'Victoria (Canada)',\n 'Vienna (Europe)',\n 'Warsaw (Europe)',\n 'Washington, DC (United States)',\n 'Zurich (Europe)',\n];\n\nexport const MenuHeight = () => {\n return (\n <Box>\n <FormField>\n <FormField.Label>Choose a City</FormField.Label>\n <FormField.Field>\n <Select items={cities}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card cs={selectCardStyles}>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n </Box>\n );\n};\n```\n\n### Ref Forwarding\n\n`Select.Input` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will\nforward `ref` to its underlying `<input type=\"text\" role=\"combobox\">` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Select} from '@workday/canvas-kit-react/select';\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const RefForwarding = () => {\n // @ts-ignore\n const [value, setValue] = React.useState('medium');\n const ref = React.useRef(null);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n const handleClick = () => {\n if (ref && ref.current) {\n console.log(ref);\n ref.current.focus();\n }\n };\n\n return (\n <>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} ref={ref} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <PrimaryButton onClick={handleClick}>Focus Select</PrimaryButton>\n </>\n );\n};\n```\n\n### Error States\n\nForm Field provides error and caution states for Select. Set the `error` prop on Form Field to\n`\"error\"` or `\"caution\"` and use `FormField.Hint` to provide messages. See\n[Form Field's Error documentation](/components/inputs/form-field/#error-states) for examples and\naccessibility guidance.\n\n#### Caution\n\nUse the alert state when a selection is valid but there is additional information.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Caution = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n return (\n <Flex cs={parentContainerStyles}>\n <FormField error=\"caution\">\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} id=\"alert-select\" />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n <FormField.Hint>Please choose a form of contact.</FormField.Hint>\n </Select>\n </FormField.Field>\n </FormField>\n Selected value: {value}\n </Flex>\n );\n};\n```\n\n#### Error\n\nUse the error state when the selection is no longer valid.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax (disabled)',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Error = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n return (\n <Flex cs={parentContainerStyles}>\n <FormField error=\"error\">\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options} nonInteractiveIds={['Fax (disabled)']}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => (\n <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>\n {item}\n </Select.Item>\n )}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>\n </Select>\n </FormField.Field>\n </FormField>\n Selected Value: {value}\n </Flex>\n );\n};\n```\n\n### Initial Selected Item\n\nYou can set `initialSelectedIds` to the value that you want initially selected.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n {\n id: 'b310c757b2d341f99d40d76f4d563c5b',\n descriptor: 'Arabic',\n languageCode: 'ar',\n label: 'Arabic',\n nativeLanguageName: '\u0627\u0644\u0639\u0631\u0628\u064A\u0629',\n },\n {\n id: 'a675a6b6e22d100017d7fe2a784d1255',\n descriptor: 'Bulgarian (Bulgaria)',\n languageCode: 'bg_BG',\n label: 'Bulgarian (Bulgaria)',\n nativeLanguageName: '\u0431\u044A\u043B\u0433\u0430\u0440\u0441\u043A\u0438 (\u0420\u0435\u043F\u0443\u0431\u043B\u0438\u043A\u0430 \u0411\u044A\u043B\u0433\u0430\u0440\u0438\u044F)',\n },\n {\n id: 'da594226446c11de98360015c5e6daf6',\n descriptor: 'English (United States)',\n languageCode: 'en_US',\n label: 'English (United States)',\n nativeLanguageName: 'English',\n },\n];\n\nexport const InitialSelectedItem = () => {\n const [value, setValue] = React.useState('English (United States)');\n const [id, setId] = React.useState('da594226446c11de98360015c5e6daf6');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setId(event.target.value);\n setValue(options.find(item => item.id === event.target.value).label);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select\n items={options}\n initialSelectedIds={['da594226446c11de98360015c5e6daf6']}\n getId={item => item.id}\n getTextValue={item => item.label}\n >\n <Select.Input onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <p>Id: {id}</p>\n <p>Value: {value}</p>\n </Flex>\n );\n};\n```\n\n### Placeholder\n\nYou can change the placeholder text by passing a string to the `placeholder` prop on\n**`FormField.Input as={Select.Input}`**. Placeholder text is not a substitute for\n**`FormField.Label`**.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n 'E-mail',\n 'Phone',\n 'Fax',\n 'Mail',\n 'Mobile Phone',\n 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n];\n\nexport const Placeholder = () => {\n const [value, setValue] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <Select.Input placeholder=\"Make a Selection\" onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => {\n return <Select.Item>{item}</Select.Item>;\n }}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n Selected Value: {value}\n </Flex>\n );\n};\n```\n\n### Fetching Dynamic Items\n\nIt's common to load items from a server call. Hoisting the `model` and setting your items on state\nallows you to pass those items to your `model`. You can leverage React state to set your items on\nload as well as displaying a placeholder indicating when items are loaded.\n\n**Note: In this case we need to use `getId` and `getTextValue` because our data doesn't have the\nproperties of `id` or `text`. Using these helper functions sets the `serverId` to be `id` and\n`label` to be `text`.**\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {useMount} from '@workday/canvas-kit-react/common';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n maxWidth: px2rem(300),\n});\n\nconst movieListItems = [\n {\n label: 'The Lion King',\n serverId: '123',\n Year: '2019',\n Runtime: '118 min',\n },\n {\n label: 'Mowgli: Legend of the Jungle',\n serverId: '234',\n Year: '2018',\n Runtime: '104 min',\n },\n {\n label: 'Doctor Strange',\n serverId: '345',\n Year: '2016',\n Runtime: '115 min',\n },\n {\n label: 'John Wick',\n Year: '2014',\n serverId: '456',\n Runtime: '101 min',\n },\n {\n label: 'The Notebook',\n serverId: '567',\n Year: '2004',\n Runtime: '123 min',\n },\n];\n\nexport const FetchingDynamicItems = () => {\n const [id, setId] = React.useState('456');\n const [moviesLists, setMoviesList] = React.useState<typeof movieListItems>([]);\n const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');\n const loadingRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n const model = useSelectModel({\n items: moviesLists,\n getTextValue: item => item.label,\n getId: item => item.serverId,\n initialSelectedIds: [id],\n });\n\n const stringValue = moviesLists.find(item => item.serverId === id)?.label || '';\n\n function loadItems() {\n setLoadingStatus('loading');\n loadingRef.current = setTimeout(() => {\n setLoadingStatus('success');\n setMoviesList(movieListItems);\n }, 1500);\n }\n\n useMount(() => {\n return () => {\n clearTimeout(loadingRef.current);\n };\n });\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Choose a Film</FormField.Label>\n <FormField.Field>\n <Select model={model}>\n <FormField.Input\n as={Select.Input}\n onChange={e => {\n setId(e.target.value);\n }}\n placeholder={loadingStatus}\n />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n {item => {\n return <Select.Item>{item.label}</Select.Item>;\n }}\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <div data-testid=\"selected-id\">Selected Id: {id}</div>\n <div data-testid=\"selected-value\">Selected value: {stringValue}</div>\n <PrimaryButton\n onClick={() => {\n loadItems();\n }}\n >\n Get Items\n </PrimaryButton>\n </Flex>\n );\n};\n```\n\n### Complex\n\nWhen registering items in an array of objects, it's common to have the text that is displayed to the\nuser be different than an id. In this example, `serverId` and `label` properties need to be remapped\nto `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties\n`text` and `id`, there would be no need for this.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n {serverId: 'email', label: 'E-mail'},\n {serverId: 'phone', label: 'Phone'},\n {serverId: 'fax', label: 'Fax'},\n {serverId: 'mail', label: 'Mail'},\n {serverId: 'mobile', label: 'Mobile Phone'},\n {\n serverId: 'oasis',\n label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n },\n];\n\nexport const Complex = () => {\n const [value, setValue] = React.useState('');\n const [id, setId] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setId(event.target.value);\n setValue(options.find(item => item.serverId === event.target.value)!.label);\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <p>Id: {id}</p>\n <p>Value: {value}</p>\n </Flex>\n );\n};\n```\n\n**Note: By default, the identifier and text value are `id` and `text` properties respectively. If\nyour data object for each item is different, provide `getId` and/or `getTextValue`. If a custom\n`getId` does not return the display text, also pass `getTextValue` \u2014 otherwise the model uses\n`getId` for type-ahead and the selected value. For example:**\n\n```jsx\nconst items = [\n {\n serverId: '1',\n label: 'First Option',\n },\n];\n\n<Select items={items} getId={item => item.serverId} getTextValue={item => item.label}>\n {/* etc */}\n</Select>;\n```\n\n### Controlled\n\nThe Select can be a\n[controlled input](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)\ncomponent by passing the `value` and `onChange` to either the `<Select>` component or the\n`<Select.Input>` component. Internally, the `Select.Input` watches for changes on the `value` React\nprop as well as the `value` DOM property and will update the model accordingly.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Select} from '@workday/canvas-kit-react/select';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n flexDirection: 'column',\n});\n\nconst options = [\n {serverId: 'email', label: 'E-mail'},\n {serverId: 'phone', label: 'Phone'},\n {serverId: 'fax', label: 'Fax'},\n {serverId: 'mail', label: 'Mail'},\n {serverId: 'mobile', label: 'Mobile Phone'},\n {\n serverId: 'oasis',\n label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',\n },\n];\n\nexport const Controlled = () => {\n const [value, setValue] = React.useState('');\n const [label, setLabel] = React.useState('');\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.currentTarget.value);\n setLabel(options.find(item => item.serverId === event.currentTarget.value)?.label || '');\n };\n\n return (\n <Flex cs={parentContainerStyles}>\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>\n <FormField.Input\n as={Select.Input}\n onChange={handleChange}\n value={value}\n name=\"contact\"\n />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n <p>Id: {value}</p>\n <p>Label: {label}</p>\n <Flex cs={{gap: system.gap.md}}>\n <SecondaryButton\n onClick={e => {\n setValue('fax');\n }}\n >\n Set to \"Fax\"\n </SecondaryButton>\n <SecondaryButton\n onClick={e => {\n setValue('');\n }}\n >\n Clear\n </SecondaryButton>\n </Flex>\n </Flex>\n );\n};\n```\n\n### When to use `getId`, or `getTextValue`\n\n- `getId`: This is an optional function to return the id of an item. If not provided, the default\n function will return the `id` property from the object of each item. If you did not provide\n `items`, do not override this function. Instead provide static items via JSX. the list will create\n an internal array of items where `id` is the only property and the default `getId` will return the\n desired result. **Note: If your array of objects has a different property for `id`, like\n `serverId`, use this function to set the id. If that function does not return the display text,\n also pass `getTextValue`.**\n\n ```tsx\n const options = [{text: 'Pizza', serverId: 'pizza-1'}, {text: 'Cheeseburger', serverId: 'cheeseburger'}]\n <FormField>\n <FormField.Label>Your Label</FormField.Label>\n <FormField.Field>\n <Select items={options} getId={(item) => item.serverId} getTextValue={(item) => item.text}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n ```\n\n- `getTextValue`: Optional function to return the text representation of an item. If not provided,\n the default function will return the `text` property of the object of each item or an empty string\n if there is no `text` property. If you did not provide `items`, do not override this function.\n **Note: If your array of objects has a different property for `text`, like `label`, use this\n function to set the text.**\n\n ```tsx\n const options = [{label: 'Pizza', id: 'pizza-1'}, {label: 'Cheeseburger', id: 'cheeseburger'}]\n <FormField>\n <FormField.Label>Your Label</FormField.Label>\n <FormField.Field>\n <Select items={options} getTextValue={(item) => item.label}>\n <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n ```\n\n### Grouped Items\n\nIn order to group items, use the static item API with **`Menu.Group`** inside **`Select.List`**, and\nstill pass **`items`** whose ids match each **`Select.Item`** **`data-id`**.\n```tsx\nimport React from 'react';\n\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Menu} from '@workday/canvas-kit-react/menu';\nimport {Select} from '@workday/canvas-kit-react/select';\n\nconst items = [\n {\n id: 'first',\n text: 'First Item',\n },\n {\n id: 'second',\n text: 'Second Item',\n },\n {\n id: 'third',\n text: 'Third Item',\n },\n {\n id: 'fourth',\n text: 'Fourth Item',\n },\n];\n\nexport const GroupedItems = () => {\n return (\n <FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={items} getId={item => item.id} getTextValue={item => item.text}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>\n <Menu.Group title=\"First Group\">\n <Select.Item data-id=\"first\">First Item</Select.Item>\n <Select.Item data-id=\"second\">Second Item</Select.Item>\n </Menu.Group>\n <Menu.Group title=\"Second Group\">\n <Select.Item data-id=\"third\">\n Third Item (with a really, really, really long label)\n </Select.Item>\n <Select.Item data-id=\"fourth\">Fourth Item</Select.Item>\n </Menu.Group>\n </Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n </FormField>\n );\n};\n```\n\n### Custom Styles\n\nSelect and its subcomponents support custom styling via the `cs` prop. For more information, check\nour\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Accessibility\n\nThe primary accessibility goal for `Select` is a visible, persistent label and a single choice from\na known list that assistive technology identifies as a combobox. Use **`Select`** when the user must\npick one option. For multiple selections, use [**MultiSelect**](/docs/preview-multiselect--docs).\nFor a value outside a fixed list, use [**Combobox**](/features/combobox/). See\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility) for label,\nhint, error, and required wiring. This follows the WAI-ARIA\n[Select-Only Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/)\npattern.\n\n### Minimum Accessible Structure\n\nBuild on the [Basic Example](#basic-example): label first, then **`Select`** inside\n**`FormField.Field`**, with the combobox, popup, list, and items in this order.\n\n```tsx\n\nconst options = ['E-mail', 'Phone', 'Fax'];\n\n<FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n</FormField>;\n```\n\nEvery `Select` requires **`FormField`**, a visible **`FormField.Label`**, and\n**`FormField.Input as={Select.Input}`** so the combobox has a programmatically determinable name,\nrelationships, and instructions. See\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility) for hint,\nerror, and required wiring.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically when you compose `Select` with `FormField` subcomponents.\n**Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by subcomponents_):\n\n- **`Select.Input`**: Visual `<input>` with `role=\"combobox\"`, `aria-haspopup=\"listbox\"`,\n `aria-expanded` from menu visibility, `aria-autocomplete=\"list\"` (do not change to `\"none\"`),\n `aria-controls` pointing at the listbox id (`{modelId}-list`), and `aria-activedescendant` while\n the list is open (removed when the list is closed). `autoComplete` is `\"off\"`. Keyboard characters\n are not inserted into the input; type-ahead is handled by the model. **`FormField.Label`** (via\n **`FormField.Input`**) is the accessible name of the combobox \u2014 do not add a second name on the\n listbox.\n- **Hidden form input**: A second input holds the selected id(s) for form submission. It is\n `aria-hidden`, has `tabIndex={-1}`, and is not in the tab order. `onChange` and `name` apply to\n this input. Focus and blur on a `ref` are forwarded to the visual combobox.\n- **`Select.List`**: `role=\"listbox\"` with an id that matches the combobox `aria-controls`. Options\n are not in the tab order; keyboard focus stays on the combobox. Listbox labelling is library-owned\n \u2014 do not set `aria-labelledby` (or `aria-label`) on **`Select.List`**.\n- **`Select.Item`**: `role=\"option\"` and `aria-selected` from selection state. Disabled options need\n **`aria-disabled`** from application code (see **Accessibility Requirements**).\n- **`Menu.Group`** (when used inside **`Select.List`**): `role=\"group\"` with `aria-labelledby`\n referencing the group heading (`title` or **`Menu.Group.Heading`**).\n- **`Select.Item.Icon`** and the caret / start icons on **`Select.Input`**: Canvas Kit icons use\n `role=\"presentation\"` and `focusable=\"false\"`. Decorative icons need no extra attributes.\n- **`disabled` on `Select.Input`**: Maps to the native `disabled` attribute on both inputs; the\n combobox is removed from the tab order.\n- **`ref`**: Forwards to the visual combobox (`<input type=\"text\" role=\"combobox\">`).\n\n**Keyboard** (_select-only combobox; focus remains on **`Select.Input`**_):\n\n- <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> move to and from the combobox (native tab order).\n Other keys are prevented from editing the input.\n- Clicking **`FormField.Label`** moves focus to the combobox. Clicking the combobox opens or closes\n the list.\n- <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd> open the list. While the list is open, those keys move\n the active option (skipping ids in **`nonInteractiveIds`**). <kbd>Home</kbd> / <kbd>End</kbd> move\n to the first or last option while the list is open.\n- <kbd>Space</kbd> opens the list when it is closed and no type-ahead string is in progress. While\n the list is open and type-ahead is empty, <kbd>Space</kbd> selects the active option and closes\n the list.\n- Printable characters type-ahead: with the list closed, matching options are selected; with the\n list open, assistive focus moves to the matching option. Consecutive keys within 500ms form a\n search string.\n- <kbd>Enter</kbd> while the list is open selects the active option (unless **`aria-disabled`**) and\n closes the list in single-select mode. It does not submit the form while the list is open.\n- <kbd>Escape</kbd> closes the list. Blur also hides the list. After close, `aria-activedescendant`\n is removed; the active option returns to the selected item when one is selected.\n- Activating an option with the pointer keeps focus on the combobox and closes the list.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the field label and, when applicable: required state,\n invalid state (`error=\"error\"`), hint or error text via `aria-describedby`, and the current\n selected text (or the placeholder when nothing is selected).\n- The control is announced as a combobox. Collapsed vs expanded follows `aria-expanded`. While the\n list is open, the active option is exposed through `aria-activedescendant`.\n- Options are announced with selected or not-selected state (`aria-selected`). Disabled options are\n announced as disabled when **`aria-disabled`** is set.\n- The Caution state is visual only \u2014 `aria-invalid` is **not** set for `error=\"caution\"`.\n- Disabled comboboxes may be announced as unavailable and are skipped in the tab order.\n- The hidden form input and decorative icons are not announced.\n\nFor rendered label, input, and hint association markup, see the DOM examples in\n[FormField's Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).\n\n### Accessibility Requirements\n\nRequired in application code for an accessible `Select`. Rows marked _(conditional)_ apply only when\nthe situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use a visible `FormField.Label`, wrap **`Select`** with\n**`FormField`**, use **`FormField.Input as={Select.Input}`**, include **`Select.Popper`**,\n**`Select.Card`**, **`Select.List`**, and **`Select.Item`**, and pass **`items`**. Omit `isHidden`,\nomit a custom `id` unless testing or composition requires it, omit a `ref` unless programmatic focus\nis required, omit **`disabled`**, **`nonInteractiveIds`**, icons, grouped list items, and a custom\n**`placeholder`** unless the spec includes them.\n\n**Programmatic focus** _(conditional \u2014 omit by default)_:\n\nUse a ref when the product needs to move focus to the combobox after an action. Do not attach a\n`ref` or call `focus()` unless the design or developer asks for it. See\n[Ref Forwarding](#ref-forwarding) under Usage for a complete Storybook example (imports, `ref` on\n**`FormField.Input as={Select.Input}`**, and a button that calls `focus()`).\n\n**Disabled options** _(conditional)_:\n\nWhen an option is unavailable, set **`nonInteractiveIds`** on **`Select`** and **`aria-disabled`**\non those **`Select.Item`**s. See [Disabled Items](#disabled-items) under Usage for a complete\nStorybook example. Do not use styling alone.\n\n| Requirement | How to satisfy |\n| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Input wiring | **`FormField.Input as={Select.Input}`** for the combobox, with **`Select.Popper`**, **`Select.Card`**, **`Select.List`**, and **`Select.Item`**. See [FormField accessibility](/components/inputs/form-field/#accessibility) for label, hint, error, and required wiring |\n| Disabled combobox _(conditional)_ | `disabled` on **`FormField.Input as={Select.Input}`**. See [Disabled](#disabled) |\n| Disabled options _(conditional)_ | **`nonInteractiveIds`** on **`Select`** (ids skipped by keyboard and type-ahead) **and** **`aria-disabled`** on those **`Select.Item`**s. See [Disabled Items](#disabled-items) |\n| Grouped list items _(conditional)_ | Keep **`items`**. Inside **`Select.List`**, render static **`Menu.Group`** (`title` or **`Menu.Group.Heading`**) and **`Select.Item`**s with matching **`data-id`** \u2014 not `{item => \u2026}`. See [Grouped Items](#grouped-items) |\n| Option icons _(conditional)_ | **`Select.Item.Icon`** on each item; **`inputStartIcon`** on **`FormField.Input as={Select.Input}`** for the selected item. Decorative icons need no extra attributes; meaning beyond the label must be text |\n| Custom placeholder _(conditional)_ | `placeholder` on **`FormField.Input as={Select.Input}`** only as short prompt text\u2014never as the only name. Default is `\"Choose an option\"` |\n| Programmatic focus _(conditional)_ | `ref` on **`FormField.Input as={Select.Input}`** and call `focus()` when moving focus to the field after an action\u2014omit by default (see **Programmatic focus** above) |\n\n**Summary for code generation:**\n\n- **REQUIRED:** visible label, **`FormField.Input as={Select.Input}`**, popup list composition\n (**`Select.Popper`**, **`Select.Card`**, **`Select.List`**, **`Select.Item`**), **`items`**.\n Default list rendering is `{item => <Select.Item>{item}</Select.Item>}` (or `item.text` /\n **`getTextValue`**).\n- **CONDITIONAL:** disabled combobox, disabled options (`nonInteractiveIds` + `aria-disabled`),\n grouped list items (**`items`** plus static **`Menu.Group`** / **`data-id`** children \u2014 do not\n omit **`items`**), option icons, custom placeholder, programmatic focus via `ref`, **`getId`** and\n **`getTextValue`** when item shape is not `{id, text}` (always pass **`getTextValue`** if custom\n **`getId`** is not the display text), **`data-id`** on static JSX **`Select.Item`**s. See\n [FormField accessibility](/components/inputs/form-field/#accessibility) for shared FormField\n conditionals (hint/error, required, stable `id`).\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- **Missing `FormField` wiring**: Do not use `Select` without **`FormField`** and\n **`FormField.Label`**, and do not render a bare **`Select.Input`** when a **`FormField`** is\n present. Use **`FormField.Input as={Select.Input}`** (see **Minimum accessible structure**). For\n shared FormField anti-patterns (manual ARIA, placeholder-only labels, color-only errors, broken ID\n references), see [FormField Anti-Patterns](/components/inputs/form-field/#anti-patterns).\n- **Duplicating combobox or listbox ARIA**: Do not set `role`, `aria-haspopup`, `aria-expanded`,\n `aria-autocomplete` (including `\"none\"`), `aria-controls`, `aria-activedescendant`,\n `autoComplete`, or listbox `role` / `id` / `aria-labelledby` / `aria-label`. Do not make\n **`Select.Item`** focusable \u2014 the active option is **`aria-activedescendant`** on the combobox.\n- **Wrong component**: Do not use a native `<select>`, **`Menu`**, **`Combobox`**, **`TextInput`**,\n or **`FormFieldGroup`** for a single submitted list value. Use\n [**MultiSelect**](/docs/preview-multiselect--docs) when more than one option can be selected.\n- **Item identity / grouping**: Do not set **`data-id`** on `{item => <Select.Item>}`. Do not omit\n **`items`** when grouping, and do not group with a render callback alone \u2014 use **`Menu.Group`**\n and **`data-id`** (see **Static item ids** and **Grouped list items**).\n- **Free-text keyboard on the combobox**: Do not add `onKeyDown` that types into the input or calls\n `preventDefault` on <kbd>Tab</kbd> \u2014 Select is select-only.\n\n## Component API\n\n## Specifications\n\n",
1562
+ accessibilityProse: '## Accessibility\n\nThe primary accessibility goal for `Select` is a visible, persistent label and a single choice from\na known list that assistive technology identifies as a combobox. Use **`Select`** when the user must\npick one option. For multiple selections, use [**MultiSelect**](/docs/preview-multiselect--docs).\nFor a value outside a fixed list, use [**Combobox**](/features/combobox/). See\n[FormField\'s accessibility documentation](/components/inputs/form-field/#accessibility) for label,\nhint, error, and required wiring. This follows the WAI-ARIA\n[Select-Only Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/)\npattern.\n\n### Minimum Accessible Structure\n\nBuild on the [Basic Example](#basic-example): label first, then **`Select`** inside\n**`FormField.Field`**, with the combobox, popup, list, and items in this order.\n\n```tsx\n\nconst options = [\'E-mail\', \'Phone\', \'Fax\'];\n\n<FormField>\n <FormField.Label>Contact</FormField.Label>\n <FormField.Field>\n <Select items={options}>\n <FormField.Input as={Select.Input} />\n <Select.Popper>\n <Select.Card>\n <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\n </Select.Card>\n </Select.Popper>\n </Select>\n </FormField.Field>\n</FormField>;\n```\n\nEvery `Select` requires **`FormField`**, a visible **`FormField.Label`**, and\n**`FormField.Input as={Select.Input}`** so the combobox has a programmatically determinable name,\nrelationships, and instructions. See\n[FormField\'s accessibility documentation](/components/inputs/form-field/#accessibility) for hint,\nerror, and required wiring.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically when you compose `Select` with `FormField` subcomponents.\n**Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by subcomponents_):\n\n- **`Select.Input`**: Visual `<input>` with `role="combobox"`, `aria-haspopup="listbox"`,\n `aria-expanded` from menu visibility, `aria-autocomplete="list"` (do not change to `"none"`),\n `aria-controls` pointing at the listbox id (`{modelId}-list`), and `aria-activedescendant` while\n the list is open (removed when the list is closed). `autoComplete` is `"off"`. Keyboard characters\n are not inserted into the input; type-ahead is handled by the model. **`FormField.Label`** (via\n **`FormField.Input`**) is the accessible name of the combobox \u2014 do not add a second name on the\n listbox.\n- **Hidden form input**: A second input holds the selected id(s) for form submission. It is\n `aria-hidden`, has `tabIndex={-1}`, and is not in the tab order. `onChange` and `name` apply to\n this input. Focus and blur on a `ref` are forwarded to the visual combobox.\n- **`Select.List`**: `role="listbox"` with an id that matches the combobox `aria-controls`. Options\n are not in the tab order; keyboard focus stays on the combobox. Listbox labelling is library-owned\n \u2014 do not set `aria-labelledby` (or `aria-label`) on **`Select.List`**.\n- **`Select.Item`**: `role="option"` and `aria-selected` from selection state. Disabled options need\n **`aria-disabled`** from application code (see **Accessibility Requirements**).\n- **`Menu.Group`** (when used inside **`Select.List`**): `role="group"` with `aria-labelledby`\n referencing the group heading (`title` or **`Menu.Group.Heading`**).\n- **`Select.Item.Icon`** and the caret / start icons on **`Select.Input`**: Canvas Kit icons use\n `role="presentation"` and `focusable="false"`. Decorative icons need no extra attributes.\n- **`disabled` on `Select.Input`**: Maps to the native `disabled` attribute on both inputs; the\n combobox is removed from the tab order.\n- **`ref`**: Forwards to the visual combobox (`<input type="text" role="combobox">`).\n\n**Keyboard** (_select-only combobox; focus remains on **`Select.Input`**_):\n\n- <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> move to and from the combobox (native tab order).\n Other keys are prevented from editing the input.\n- Clicking **`FormField.Label`** moves focus to the combobox. Clicking the combobox opens or closes\n the list.\n- <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd> open the list. While the list is open, those keys move\n the active option (skipping ids in **`nonInteractiveIds`**). <kbd>Home</kbd> / <kbd>End</kbd> move\n to the first or last option while the list is open.\n- <kbd>Space</kbd> opens the list when it is closed and no type-ahead string is in progress. While\n the list is open and type-ahead is empty, <kbd>Space</kbd> selects the active option and closes\n the list.\n- Printable characters type-ahead: with the list closed, matching options are selected; with the\n list open, assistive focus moves to the matching option. Consecutive keys within 500ms form a\n search string.\n- <kbd>Enter</kbd> while the list is open selects the active option (unless **`aria-disabled`**) and\n closes the list in single-select mode. It does not submit the form while the list is open.\n- <kbd>Escape</kbd> closes the list. Blur also hides the list. After close, `aria-activedescendant`\n is removed; the active option returns to the selected item when one is selected.\n- Activating an option with the pointer keeps focus on the combobox and closes the list.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the field label and, when applicable: required state,\n invalid state (`error="error"`), hint or error text via `aria-describedby`, and the current\n selected text (or the placeholder when nothing is selected).\n- The control is announced as a combobox. Collapsed vs expanded follows `aria-expanded`. While the\n list is open, the active option is exposed through `aria-activedescendant`.\n- Options are announced with selected or not-selected state (`aria-selected`). Disabled options are\n announced as disabled when **`aria-disabled`** is set.\n- The Caution state is visual only \u2014 `aria-invalid` is **not** set for `error="caution"`.\n- Disabled comboboxes may be announced as unavailable and are skipped in the tab order.\n- The hidden form input and decorative icons are not announced.\n\nFor rendered label, input, and hint association markup, see the DOM examples in\n[FormField\'s Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).\n\n### Accessibility Requirements\n\nRequired in application code for an accessible `Select`. Rows marked _(conditional)_ apply only when\nthe situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use a visible `FormField.Label`, wrap **`Select`** with\n**`FormField`**, use **`FormField.Input as={Select.Input}`**, include **`Select.Popper`**,\n**`Select.Card`**, **`Select.List`**, and **`Select.Item`**, and pass **`items`**. Omit `isHidden`,\nomit a custom `id` unless testing or composition requires it, omit a `ref` unless programmatic focus\nis required, omit **`disabled`**, **`nonInteractiveIds`**, icons, grouped list items, and a custom\n**`placeholder`** unless the spec includes them.\n\n**Programmatic focus** _(conditional \u2014 omit by default)_:\n\nUse a ref when the product needs to move focus to the combobox after an action. Do not attach a\n`ref` or call `focus()` unless the design or developer asks for it. See\n[Ref Forwarding](#ref-forwarding) under Usage for a complete Storybook example (imports, `ref` on\n**`FormField.Input as={Select.Input}`**, and a button that calls `focus()`).\n\n**Disabled options** _(conditional)_:\n\nWhen an option is unavailable, set **`nonInteractiveIds`** on **`Select`** and **`aria-disabled`**\non those **`Select.Item`**s. See [Disabled Items](#disabled-items) under Usage for a complete\nStorybook example. Do not use styling alone.\n\n| Requirement | How to satisfy |\n| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Input wiring | **`FormField.Input as={Select.Input}`** for the combobox, with **`Select.Popper`**, **`Select.Card`**, **`Select.List`**, and **`Select.Item`**. See [FormField accessibility](/components/inputs/form-field/#accessibility) for label, hint, error, and required wiring |\n| Disabled combobox _(conditional)_ | `disabled` on **`FormField.Input as={Select.Input}`**. See [Disabled](#disabled) |\n| Disabled options _(conditional)_ | **`nonInteractiveIds`** on **`Select`** (ids skipped by keyboard and type-ahead) **and** **`aria-disabled`** on those **`Select.Item`**s. See [Disabled Items](#disabled-items) |\n| Grouped list items _(conditional)_ | Keep **`items`**. Inside **`Select.List`**, render static **`Menu.Group`** (`title` or **`Menu.Group.Heading`**) and **`Select.Item`**s with matching **`data-id`** \u2014 not `{item => \u2026}`. See [Grouped Items](#grouped-items) |\n| Option icons _(conditional)_ | **`Select.Item.Icon`** on each item; **`inputStartIcon`** on **`FormField.Input as={Select.Input}`** for the selected item. Decorative icons need no extra attributes; meaning beyond the label must be text |\n| Custom placeholder _(conditional)_ | `placeholder` on **`FormField.Input as={Select.Input}`** only as short prompt text\u2014never as the only name. Default is `"Choose an option"` |\n| Programmatic focus _(conditional)_ | `ref` on **`FormField.Input as={Select.Input}`** and call `focus()` when moving focus to the field after an action\u2014omit by default (see **Programmatic focus** above) |\n\n**Summary for code generation:**\n\n- **REQUIRED:** visible label, **`FormField.Input as={Select.Input}`**, popup list composition\n (**`Select.Popper`**, **`Select.Card`**, **`Select.List`**, **`Select.Item`**), **`items`**.\n Default list rendering is `{item => <Select.Item>{item}</Select.Item>}` (or `item.text` /\n **`getTextValue`**).\n- **CONDITIONAL:** disabled combobox, disabled options (`nonInteractiveIds` + `aria-disabled`),\n grouped list items (**`items`** plus static **`Menu.Group`** / **`data-id`** children \u2014 do not\n omit **`items`**), option icons, custom placeholder, programmatic focus via `ref`, **`getId`** and\n **`getTextValue`** when item shape is not `{id, text}` (always pass **`getTextValue`** if custom\n **`getId`** is not the display text), **`data-id`** on static JSX **`Select.Item`**s. See\n [FormField accessibility](/components/inputs/form-field/#accessibility) for shared FormField\n conditionals (hint/error, required, stable `id`).\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- **Missing `FormField` wiring**: Do not use `Select` without **`FormField`** and\n **`FormField.Label`**, and do not render a bare **`Select.Input`** when a **`FormField`** is\n present. Use **`FormField.Input as={Select.Input}`** (see **Minimum accessible structure**). For\n shared FormField anti-patterns (manual ARIA, placeholder-only labels, color-only errors, broken ID\n references), see [FormField Anti-Patterns](/components/inputs/form-field/#anti-patterns).\n- **Duplicating combobox or listbox ARIA**: Do not set `role`, `aria-haspopup`, `aria-expanded`,\n `aria-autocomplete` (including `"none"`), `aria-controls`, `aria-activedescendant`,\n `autoComplete`, or listbox `role` / `id` / `aria-labelledby` / `aria-label`. Do not make\n **`Select.Item`** focusable \u2014 the active option is **`aria-activedescendant`** on the combobox.\n- **Wrong component**: Do not use a native `<select>`, **`Menu`**, **`Combobox`**, **`TextInput`**,\n or **`FormFieldGroup`** for a single submitted list value. Use\n [**MultiSelect**](/docs/preview-multiselect--docs) when more than one option can be selected.\n- **Item identity / grouping**: Do not set **`data-id`** on `{item => <Select.Item>}`. Do not omit\n **`items`** when grouping, and do not group with a render callback alone \u2014 use **`Menu.Group`**\n and **`data-id`** (see **Static item ids** and **Grouped list items**).\n- **Free-text keyboard on the combobox**: Do not add `onKeyDown` that types into the input or calls\n `preventDefault` on <kbd>Tab</kbd> \u2014 Select is select-only.'
1563
1563
  },
1564
1564
  "segmented-control": {
1565
1565
  title: "Components/Buttons/Segmented Control",