remove the manually-generated id to show case the automatic one

danilo-leal · Dec 1, 2023 · 3da5722 · 3da5722
1 parent 441acde
commit 3da5722
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 8 deletions.
diff --git a/docs/data/joy/components/select/SelectFieldDemo.js b/docs/data/joy/components/select/SelectFieldDemo.js
@@ -8,9 +8,7 @@ import Option from '@mui/joy/Option';
 export default function SelectFieldDemo() {
   return (
     <FormControl sx={{ width: 240 }}>
-      <FormLabel id="select-field-demo-label" htmlFor="select-field-demo-button">
-        Favorite pet
-      </FormLabel>
+      <FormLabel htmlFor="select-field-demo-button">Favorite pet</FormLabel>
       <Select
         defaultValue="dog"
         slotProps={{

diff --git a/docs/data/joy/components/select/SelectFieldDemo.tsx b/docs/data/joy/components/select/SelectFieldDemo.tsx
@@ -8,9 +8,7 @@ import Option from '@mui/joy/Option';
 export default function SelectFieldDemo() {
   return (
     <FormControl sx={{ width: 240 }}>
-      <FormLabel id="select-field-demo-label" htmlFor="select-field-demo-button">
-        Favorite pet
-      </FormLabel>
+      <FormLabel htmlFor="select-field-demo-button">Favorite pet</FormLabel>
       <Select
         defaultValue="dog"
         slotProps={{

diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
@@ -243,9 +243,9 @@ If you'd like to set a `max-height` for a long list of options, make sure to spe
 
 ## Accessibility
 
-In order for the select to be accessible, **it should be linked to a label**.
+To ensure the Select is accessible, make sure to add label linked to it.
 
-The `FormControl` automatically generates a unique id that links the select with the `FormLabel` component:
+If you use the Form Label component, together with the Form Control, Joy UI automatically generates a unique id that links the Select to it.
 
 {{"demo": "SelectFieldDemo.js"}}