docs(ui-simple-select,ui-select): mention in Select, SimpleSelect doc…

…s that option ids must be globally unique
instructure · Jan 29, 2025 · 8341b37 · 8341b37
1 parent 6c85b31
commit 8341b37
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/packages/ui-select/src/Select/Option/props.ts b/packages/ui-select/src/Select/Option/props.ts
@@ -33,7 +33,8 @@ import type {
 
 type OptionProps = {
   /**
-   * The id for the option.
+   * The id for the option. **Must be globally unique**, it will be translated
+   * to an `id` prop in the DOM.
    */
   id: string
   /**

diff --git a/packages/ui-select/src/Select/README.md b/packages/ui-select/src/Select/README.md
@@ -8,7 +8,10 @@ describes: Select
 - It should not be used for navigation or as a list of actions/functions. (see [Menu](#Menu)).
 - It can behave like a `<select>` element or implement autocomplete behavior.
 
-> Note: Before implementing Select, see if a [SimpleSelect](#SimpleSelect) will suffice.
+> Notes:
+>
+> - Before implementing Select, see if a [SimpleSelect](#SimpleSelect) will suffice.
+> - The `id` prop on options must be globally unique, it will be translated to an `id` prop in the DOM.
 
 #### Managing state for a Select
 

diff --git a/packages/ui-simple-select/src/SimpleSelect/Option/props.ts b/packages/ui-simple-select/src/SimpleSelect/Option/props.ts
@@ -43,7 +43,8 @@ type RenderSimpleSelectOptionLabel = Renderable<OptionProps>
 
 type SimpleSelectOptionOwnProps = {
   /**
-   * The id for the option.
+   * The id for the option. **Must be globally unique**, it will be translated
+   * to an `id` prop in the DOM.
    */
   id: string
   /**

diff --git a/packages/ui-simple-select/src/SimpleSelect/README.md b/packages/ui-simple-select/src/SimpleSelect/README.md
@@ -4,6 +4,9 @@ describes: SimpleSelect
 
 `SimpleSelect` is a higher level abstraction of [Select](#Select) that closely parallels the functionality of standard HTML `<select>` elements. It does not support autocomplete behavior and is much less configurable than [Select](#Select). However, because it is more opinionated, `SimpleSelect` can be implemented with very little boilerplate.
 
+> Note: The `id` prop on options must be globally unique, it will be translated to an `id` prop
+> in the DOM.
+
 ### Uncontrolled
 
 For the most basic implementations, `SimpleSelect` can be uncontrolled. If desired, the `defaultValue` prop can be used to set the initial selection.