@ceed/ads 1.35.1 → 1.37.0

package/dist/components/inputs/SearchBar.md

@@ -52,9 +52,9 @@ When the input has a value, hovering over the component reveals a clear (✕) bu
 
 ```tsx
 <Stack alignItems="flex-start" gap={2}>
-  <Typography level="body-sm">Hover over the input to reveal the clear (✕) button.</Typography>
-  <SearchBar value={value} onChange={setValue} />
-</Stack>
+    <Typography level="body-sm">Hover over the input to reveal the clear (✕) button.</Typography>
+    <SearchBar value={value} onChange={setValue} />
+  </Stack>
 ```
 
 ## Placeholder
@@ -63,19 +63,25 @@ Each `SearchBarOption` can include a `placeholder` field that is shown in the te
 
 ```tsx
 <Stack alignItems="flex-start" gap={3}>
-  <Stack alignItems="flex-start" gap={1}>
-    <Typography level="body-xs" fontWeight="md">
-      No placeholder prop — uses the active option's placeholder
-    </Typography>
-    <SearchBar showSelect options={SAMPLE_OPTIONS} value={value} onChange={setValue} />
+    <Stack alignItems="flex-start" gap={1}>
+      <Typography level="body-xs" fontWeight="md">
+        No placeholder prop — uses the active option's placeholder
+      </Typography>
+      <SearchBar showSelect options={SAMPLE_OPTIONS} value={value} onChange={setValue} />
+    </Stack>
+    <Stack alignItems="flex-start" gap={1}>
+      <Typography level="body-xs" fontWeight="md">
+        placeholder="Search by keyword" — overrides option-level placeholder
+      </Typography>
+      <SearchBar
+        showSelect
+        options={SAMPLE_OPTIONS}
+        placeholder="Search by keyword"
+        value={value}
+        onChange={setValue}
+      />
+    </Stack>
   </Stack>
-  <Stack alignItems="flex-start" gap={1}>
-    <Typography level="body-xs" fontWeight="md">
-      placeholder="Search by keyword" — overrides option-level placeholder
-    </Typography>
-    <SearchBar showSelect options={SAMPLE_OPTIONS} placeholder="Search by keyword" value={value} onChange={setValue} />
-  </Stack>
-</Stack>
 ```
 
 ## onSearch
@@ -84,32 +90,46 @@ Each `SearchBarOption` can include a `placeholder` field that is shown in the te
 
 ```tsx
 <Stack alignItems="flex-start" gap={2}>
-  <SearchBar showSelect options={SAMPLE_OPTIONS} value={value} onChange={setValue} onSearch={setLastSearch} />
-  <Typography level="body-sm">value: "{value}"</Typography>
-  {lastSearch && <Typography level="body-sm">
-  onSearch: [{lastSearch.selectValue}] "{lastSearch.inputValue}"
-</Typography>}
-</Stack>
+    <SearchBar
+      showSelect
+      options={SAMPLE_OPTIONS}
+      value={value}
+      onChange={setValue}
+      onSearch={setLastSearch}
+    />
+    <Typography level="body-sm">value: "{value}"</Typography>
+    {lastSearch && (
+      <Typography level="body-sm">
+        onSearch: [{lastSearch.selectValue}] "{lastSearch.inputValue}"
+      </Typography>
+    )}
+  </Stack>
 ```
 
 When `showSelect` is `false`, `selectValue` is omitted from the payload entirely — not `undefined` as a key, but absent.
 
 ```tsx
 <Stack alignItems="flex-start" gap={2}>
-  <Typography level="body-sm">
-    When <code>showSelect</code> is <code>false</code>, <code>selectValue</code> is omitted from the{' '}
-    <code>onSearch</code> payload.
-  </Typography>
-  <SearchBar value={value} onChange={setValue} onSearch={setLastSearch} />
-  {lastSearch && <Stack alignItems="flex-start" gap={0.5}>
-  <Typography level="body-sm">inputValue: "{lastSearch.inputValue}"</Typography>
-  <Typography level="body-sm" sx={{
-    color: lastSearch.selectValue === undefined ? 'success.500' : 'danger.500'
-  }}>
-  selectValue: {lastSearch.selectValue === undefined ? 'undefined ✅' : `"${lastSearch.selectValue}" ❌`}
-</Typography>
-</Stack>}
-</Stack>
+    <Typography level="body-sm">
+      When <code>showSelect</code> is <code>false</code>, <code>selectValue</code> is omitted from
+      the <code>onSearch</code> payload.
+    </Typography>
+    <SearchBar value={value} onChange={setValue} onSearch={setLastSearch} />
+    {lastSearch && (
+      <Stack alignItems="flex-start" gap={0.5}>
+        <Typography level="body-sm">inputValue: "{lastSearch.inputValue}"</Typography>
+        <Typography
+          level="body-sm"
+          sx={{
+            color: lastSearch.selectValue === undefined ? "success.500" : "danger.500"
+          }}
+        >
+          selectValue:{" "}
+          {lastSearch.selectValue === undefined ? "undefined ✅" : `"${lastSearch.selectValue}" ❌`}
+        </Typography>
+      </Stack>
+    )}
+  </Stack>
 ```
 
 ## Width
@@ -118,31 +138,33 @@ SearchBar sizes to its content by default. Pass any `Box` width prop to constrai
 
 ```tsx
 <Stack alignItems="flex-start" gap={3}>
-  <Stack alignItems="flex-start" gap={1}>
-    <Typography level="body-xs" fontWeight="md">
-      width="100%" — stretches to parent width
-    </Typography>
-    <Box sx={{
-      border: '1px dashed',
-      borderColor: 'neutral.300',
-      padding: 1
-    }}>
-    <SearchBar width="100%" value={value} onChange={setValue} />
-  </Box>
-</Stack>
-<Stack alignItems="flex-start" gap={1}>
-  <Typography level="body-xs" fontWeight="md">
-    width={400} — fixed 400px
-  </Typography>
-  <SearchBar width={400} value={value} onChange={setValue} />
-</Stack>
-<Stack alignItems="flex-start" gap={1}>
-  <Typography level="body-xs" fontWeight="md">
-    No width prop — sizes to content (inline-flex default)
-  </Typography>
-  <SearchBar value={value} onChange={setValue} />
-</Stack>
-</Stack>
+    <Stack alignItems="flex-start" gap={1}>
+      <Typography level="body-xs" fontWeight="md">
+        width="100%" — stretches to parent width
+      </Typography>
+      <Box
+        sx={{
+          border: "1px dashed",
+          borderColor: "neutral.300",
+          padding: 1
+        }}
+      >
+        <SearchBar width="100%" value={value} onChange={setValue} />
+      </Box>
+    </Stack>
+    <Stack alignItems="flex-start" gap={1}>
+      <Typography level="body-xs" fontWeight="md">
+        width={400} — fixed 400px
+      </Typography>
+      <SearchBar width={400} value={value} onChange={setValue} />
+    </Stack>
+    <Stack alignItems="flex-start" gap={1}>
+      <Typography level="body-xs" fontWeight="md">
+        No width prop — sizes to content (inline-flex default)
+      </Typography>
+      <SearchBar value={value} onChange={setValue} />
+    </Stack>
+  </Stack>
 ```
 
 ## Props and Customization

package/dist/components/inputs/Select.md

@@ -54,13 +54,7 @@ const options = [
 ];
 
 function MyComponent() {
-  return (
-    <Select
-      label="Choose a pet"
-      options={options}
-      defaultValue="dog"
-    />
-  );
+  return <Select label="Choose a pet" options={options} defaultValue="dog" />;
 }
 ```
 
@@ -70,11 +64,11 @@ Select supports four visual styles: `outlined` (default), `plain`, `soft`, and `
 
 ```tsx
 <Stack spacing={4}>
-  <Select defaultValue="dog" options={options} />
-  <Select defaultValue="dog" variant="plain" options={options} />
-  <Select defaultValue="dog" variant="soft" options={options} />
-  <Select defaultValue="dog" variant="solid" options={options} />
-</Stack>
+    <Select defaultValue="dog" options={options} />
+    <Select defaultValue="dog" variant="plain" options={options} />
+    <Select defaultValue="dog" variant="soft" options={options} />
+    <Select defaultValue="dog" variant="solid" options={options} />
+  </Stack>
 ```
 
 ```tsx
@@ -90,10 +84,10 @@ Three sizes are available: `sm`, `md` (default), and `lg`.
 
 ```tsx
 <Stack spacing={4}>
-  <Select defaultValue="dog" size="sm" options={options} />
-  <Select defaultValue="dog" size="md" options={options} />
-  <Select defaultValue="dog" size="lg" options={options} />
-</Stack>
+    <Select defaultValue="dog" size="sm" options={options} />
+    <Select defaultValue="dog" size="md" options={options} />
+    <Select defaultValue="dog" size="lg" options={options} />
+  </Stack>
 ```
 
 ```tsx
@@ -108,12 +102,12 @@ Apply semantic colors to communicate intent or state.
 
 ```tsx
 <Stack spacing={4}>
-  <Select defaultValue="dog" color="primary" options={options} />
-  <Select defaultValue="dog" color="neutral" options={options} />
-  <Select defaultValue="dog" color="success" options={options} />
-  <Select defaultValue="dog" color="danger" options={options} />
-  <Select defaultValue="dog" color="warning" options={options} />
-</Stack>
+    <Select defaultValue="dog" color="primary" options={options} />
+    <Select defaultValue="dog" color="neutral" options={options} />
+    <Select defaultValue="dog" color="success" options={options} />
+    <Select defaultValue="dog" color="danger" options={options} />
+    <Select defaultValue="dog" color="warning" options={options} />
+  </Stack>
 ```
 
 ```tsx
@@ -129,11 +123,19 @@ Apply semantic colors to communicate intent or state.
 Use `startDecorator` and `endDecorator` to add icons, badges, or other elements beside the select trigger.
 
 ```tsx
-<Select placeholder="Select a pet…" startDecorator={<FavoriteBorder />} endDecorator={<Chip size="sm" color="danger" variant="soft">
-  +5
-</Chip>} sx={{
-width: 240
-}} options={options} />
+<Select
+    placeholder="Select a pet…"
+    startDecorator={<FavoriteBorder />}
+    endDecorator={
+      <Chip size="sm" color="danger" variant="soft">
+        +5
+      </Chip>
+    }
+    sx={{
+      width: 240
+    }}
+    options={options}
+  />
 ```
 
 ```tsx
@@ -144,11 +146,13 @@ import { Chip } from '@ceed/ads';
   placeholder="Select a pet..."
   startDecorator={<FavoriteBorder />}
   endDecorator={
-    <Chip size="sm" color="danger" variant="soft">+5</Chip>
+    <Chip size="sm" color="danger" variant="soft">
+      +5
+    </Chip>
   }
   options={options}
   sx={{ width: 240 }}
-/>
+/>;
 ```
 
 ## Label and Helper Text
@@ -157,14 +161,14 @@ The `label` prop renders a form label above the select. The `helperText` prop re
 
 ```tsx
 <>
-  <Select label="Label" defaultValue="dog" options={options} />
-</>
+    <Select label="Label" defaultValue="dog" options={options} />
+  </>
 ```
 
 ```tsx
 <>
-  <Select label="Select" helperText="I'm helper text" defaultValue="dog" options={options} />
-</>
+    <Select label="Select" helperText="I'm helper text" defaultValue="dog" options={options} />
+  </>
 ```
 
 ```tsx
@@ -184,17 +188,12 @@ Set `error` to `true` to visually indicate a validation error. Combine with `hel
 
 ```tsx
 <>
-  <Select label="label" error defaultValue="dog" options={options} />
-</>
+    <Select label="label" error defaultValue="dog" options={options} />
+  </>
 ```
 
 ```tsx
-<Select
-  label="Pet"
-  error
-  helperText="This field is required"
-  options={options}
-/>
+<Select label="Pet" error helperText="This field is required" options={options} />
 ```
 
 ## Form Control
@@ -203,9 +202,61 @@ Combining `label`, `helperText`, and `error` produces a complete form field. Her
 
 ```tsx
 <>
-  <Select label="Label" helperText="I'm helper text" defaultValue="dog" options={options} />
-  <Select label="Label" helperText="I'm helper text" defaultValue="dog" error options={options} />
-</>
+    <Select label="Label" helperText="I'm helper text" defaultValue="dog" options={options} />
+    <Select label="Label" helperText="I'm helper text" defaultValue="dog" error options={options} />
+  </>
+```
+
+## Slot Props and Deterministic Ids
+
+The `slotProps` prop targets both Joy Select's own slots (`button`, `listbox`, `root`, …) and the wrapper slots that `Select` composes around it (`formControl`, `formLabel`, `formHelperText`). Pass `id` (or `slotProps.formControl.id`) to pin the field's ids deterministically — `FormControl` derives the button `id` and the label `id` (`${id}-label`) from it, which keeps `byLabelText` / `byRole('combobox', { name })` queries stable in tests.
+
+```tsx
+<Stack
+    spacing={3}
+    sx={{
+      minWidth: 240
+    }}
+  >
+    {/* id seeds deterministic FormControl ids: button#pet, label#pet-label (testable via byLabelText/byRole) */}
+    <Select
+      id="pet"
+      label="Pet"
+      defaultValue="cat"
+      options={options}
+      slotProps={{
+        formLabel: {
+          sx: {
+            color: "primary.500"
+          }
+        },
+        formHelperText: {
+          sx: {
+            fontStyle: "italic"
+          }
+        },
+        button: {
+          "aria-describedby": "pet-extra"
+        }
+      }}
+      helperText="Wired via slotProps"
+    />
+  </Stack>
+```
+
+```tsx
+<Select
+  id="pet"
+  label="Pet"
+  helperText="Wired via slotProps"
+  options={options}
+  slotProps={{
+    formLabel: { sx: { color: 'primary.500' } },
+    formHelperText: { sx: { fontStyle: 'italic' } },
+    button: { 'aria-describedby': 'pet-extra' },
+  }}
+/>
+// → renders button#pet and label#pet-label, connected via aria-labelledby
 ```
 
 ## Required Field
@@ -222,12 +273,7 @@ Set `required` to mark the field as required. An asterisk is added to the label
 ```
 
 ```tsx
-<Select
-  label="Pet"
-  helperText="This field is required"
-  required
-  options={options}
-/>
+<Select label="Pet" helperText="This field is required" required options={options} />
 ```
 
 ## Multiple Selection
@@ -245,12 +291,7 @@ Set `multiple` to allow selecting more than one option. The value becomes an arr
 ```
 
 ```tsx
-<Select
-  label="Pets"
-  multiple
-  defaultValue={['dog']}
-  options={options}
-/>
+<Select label="Pets" multiple defaultValue={['dog']} options={options} />
 ```
 
 ## Controlled Select
@@ -259,30 +300,41 @@ Use the `value` and `onChange` props for controlled behavior when you need to sy
 
 ```tsx
 <div>
-  <Select {...args} options={options} value={value} onChange={(event, newValue) => {
-    setValue(newValue);
-    args.onChange?.(event, newValue);
-  }} />
-  <Select {...args} options={['dog', 'cat', 'fish', 'bird'] as string[]} value={value} onChange={(event, newValue) => {
-    setValue(newValue);
-    args.onChange?.(event, newValue);
-  }} />
-  <Select {...args} options={['dog', 'cat', 'fish', 'bird'] as string[]} value={[value]} onChange={(event, newValue) => {
-    setValue(newValue);
-    args.onChange?.(event, newValue);
-  }} multiple />
-</div>
+    <Select
+      {...args}
+      options={options}
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+        args.onChange?.(event, newValue);
+      }}
+    />
+    <Select
+      {...args}
+      options={["dog", "cat", "fish", "bird"] as string[]}
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+        args.onChange?.(event, newValue);
+      }}
+    />
+    <Select
+      {...args}
+      options={["dog", "cat", "fish", "bird"] as string[]}
+      value={[value]}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+        args.onChange?.(event, newValue);
+      }}
+      multiple
+    />
+  </div>
 ```
 
 ```tsx
 const [value, setValue] = useState('dog');
 
-<Select
-  label="Pet"
-  value={value}
-  onChange={(event, newValue) => setValue(newValue)}
-  options={options}
-/>
+<Select label="Pet" value={value} onChange={(event, newValue) => setValue(newValue)} options={options} />;
 ```
 
 ## Disabled Options
@@ -308,7 +360,7 @@ const options = [
   { value: 'bird', label: 'Bird' },
 ];
 
-<Select label="Pet" options={options} defaultValue="dog" />
+<Select label="Pet" options={options} defaultValue="dog" />;
 ```
 
 ## Options with Secondary Text
@@ -317,16 +369,27 @@ Add a `secondaryText` field to display supplementary information below each opti
 
 ```tsx
 <Stack spacing={4} direction="row" alignItems="flex-start">
-  {sizes.map(size => <Stack key={size} spacing={1}>
-  <span style={{
-    color: '#6366f1',
-    fontSize: 12
-  }}>{size}</span>
-  <Select placeholder="Placeholder" options={optionsWithSecondaryText} sx={{
-    minWidth: 200
-  }} size={size} />
-</Stack>)}
-</Stack>
+    {sizes.map((size) => (
+      <Stack key={size} spacing={1}>
+        <span
+          style={{
+            color: "#6366f1",
+            fontSize: 12
+          }}
+        >
+          {size}
+        </span>
+        <Select
+          placeholder="Placeholder"
+          options={optionsWithSecondaryText}
+          sx={{
+            minWidth: 200
+          }}
+          size={size}
+        />
+      </Stack>
+    ))}
+  </Stack>
 ```
 
 ```tsx
@@ -336,7 +399,7 @@ const userOptions = [
   { value: 'sophia', label: 'Sophia Martinez', secondaryText: '(646) 555-0734' },
 ];
 
-<Select placeholder="Select a contact" options={userOptions} />
+<Select placeholder="Select a contact" options={userOptions} />;
 ```
 
 ## Numeric Values
@@ -345,11 +408,11 @@ Select supports both string and numeric option values. When using numeric values
 
 ```tsx
 <Stack spacing={4}>
-  <Select defaultValue={1} options={numericOptions} />
-  <Select defaultValue={1} variant="plain" options={numericOptions} />
-  <Select defaultValue={1} variant="soft" options={numericOptions} />
-  <Select defaultValue={1} variant="solid" options={numericOptions} />
-</Stack>
+    <Select defaultValue={1} options={numericOptions} />
+    <Select defaultValue={1} variant="plain" options={numericOptions} />
+    <Select defaultValue={1} variant="soft" options={numericOptions} />
+    <Select defaultValue={1} variant="solid" options={numericOptions} />
+  </Stack>
 ```
 
 ```tsx
@@ -359,7 +422,7 @@ const numericOptions = [
   { value: 3, label: 'Option 3' },
 ];
 
-<Select options={numericOptions} defaultValue={1} />
+<Select options={numericOptions} defaultValue={1} />;
 ```
 
 ## Form with Validation
@@ -546,25 +609,27 @@ function LocationSelect() {
 
 ### Key Props
 
-| Prop             | Type                                                             | Default           | Description                                          |
-| ---------------- | ---------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
-| `options`        | `OptionType[]`                                                   | `[]`              | Array of options (objects or primitives)             |
-| `value`          | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]` | -                 | Selected value(s) for controlled mode                |
-| `defaultValue`   | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]` | -                 | Initial value for uncontrolled mode                  |
-| `onChange`       | `(event: { target: { name?, value } }, newValue) => void`        | -                 | Callback when selection changes                      |
-| `multiple`       | `boolean`                                                        | `false`           | Allow multiple selections (value becomes an array)   |
-| `label`          | `string`                                                         | -                 | Form label displayed above the select                |
-| `helperText`     | `string`                                                         | -                 | Helper text displayed below the select               |
-| `error`          | `boolean`                                                        | `false`           | Applies danger color to indicate validation error    |
-| `required`       | `boolean`                                                        | `false`           | Marks the field as required (adds asterisk to label) |
-| `disabled`       | `boolean`                                                        | `false`           | Disables the select                                  |
-| `placeholder`    | `string`                                                         | `'Choose one...'` | Placeholder text when no value is selected           |
-| `size`           | `'sm' \| 'md' \| 'lg'`                                           | `'md'`            | Select size                                          |
-| `variant`        | `'outlined' \| 'plain' \| 'solid' \| 'soft'`                     | `'outlined'`      | Visual style variant                                 |
-| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`   | `'neutral'`       | Color scheme                                         |
-| `startDecorator` | `ReactNode`                                                      | -                 | Content rendered before the select trigger text      |
-| `endDecorator`   | `ReactNode`                                                      | -                 | Content rendered after the select trigger text       |
-| `sx`             | `SxProps`                                                        | -                 | Custom styles using the MUI system                   |
+| Prop             | Type                                                                    | Default           | Description                                                    |
+| ---------------- | ----------------------------------------------------------------------- | ----------------- | -------------------------------------------------------------- |
+| `options`        | `OptionType[]`                                                          | `[]`              | Array of options (objects or primitives)                       |
+| `value`          | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]`        | -                 | Selected value(s) for controlled mode                          |
+| `defaultValue`   | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]`        | -                 | Initial value for uncontrolled mode                            |
+| `onChange`       | `(event: { target: { name?, value } }, newValue) => void`               | -                 | Callback when selection changes                                |
+| `multiple`       | `boolean`                                                               | `false`           | Allow multiple selections (value becomes an array)             |
+| `label`          | `string`                                                                | -                 | Form label displayed above the select                          |
+| `helperText`     | `string`                                                                | -                 | Helper text displayed below the select                         |
+| `error`          | `boolean`                                                               | `false`           | Applies danger color to indicate validation error              |
+| `required`       | `boolean`                                                               | `false`           | Marks the field as required (adds asterisk to label)           |
+| `disabled`       | `boolean`                                                               | `false`           | Disables the select                                            |
+| `placeholder`    | `string`                                                                | `'Choose one...'` | Placeholder text when no value is selected                     |
+| `size`           | `'sm' \| 'md' \| 'lg'`                                                  | `'md'`            | Select size                                                    |
+| `variant`        | `'outlined' \| 'plain' \| 'solid' \| 'soft'`                            | `'outlined'`      | Visual style variant                                           |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`          | `'neutral'`       | Color scheme                                                   |
+| `startDecorator` | `ReactNode`                                                             | -                 | Content rendered before the select trigger text                |
+| `endDecorator`   | `ReactNode`                                                             | -                 | Content rendered after the select trigger text                 |
+| `id`             | `string`                                                                | -                 | Seeds deterministic ids: button `id`, label `${id}-label`      |
+| `slotProps`      | `{ formControl?, formLabel?, formHelperText?, button?, listbox?, ... }` | -                 | Props forwarded to composed wrapper slots and Joy Select slots |
+| `sx`             | `SxProps`                                                               | -                 | Custom styles using the MUI system                             |
 
 ### Option Type
 
@@ -588,19 +653,20 @@ const options = [
   { value: 2, label: 'Option 2' },
 ] as const;
 
-<Select<typeof options[number], false>
+<Select<(typeof options)[number], false>
   options={options}
   onChange={(e, val) => {
     // val is typed as number
   }}
-/>
+/>;
 ```
 
 > **Note**: Select also accepts all Joy UI Select props.
 
 ## Accessibility
 
-- **Label association**: When you use the `label` prop, the component automatically connects the label to the select element via `aria-labelledby`. Always provide a label for screen reader users.
+- **Label association**: When you use the `label` prop, the component automatically connects the label to the select element via `aria-labelledby` (the internal `FormControl` propagates a `labelId` to both the label and the button slot). You do not need to wire `useId` or a custom `FormLabel` externally. Always provide a label for screen reader users.
+- **Deterministic ids for tests**: Pass `id` (or `slotProps.formControl.id`) to fix the generated ids, so `byLabelText` / `byRole('combobox', { name })` resolve to a stable accessible name.
 - **Keyboard navigation**: The select can be opened with Enter or Space, navigated with Arrow Up/Down and Home/End, confirmed with Enter, and dismissed with Escape.
 - **Error announcement**: When `error` is set, `aria-invalid` is applied. Pair it with a descriptive `helperText` so assistive technology can announce the error reason.
 - **Required state**: The `required` prop adds `aria-required` and a visible asterisk to the label, communicating the requirement both visually and programmatically.