feat(Select): add warning when name is missing from component props

src/components/Select/Select.stories.tsx

@@ -67,6 +67,7 @@ function InteractiveExampleUsingChildren(props: Props) {
  className={clsx(!compact && 'w-60')}
  data-testid="dropdown"
  disabled={disabled}
+ name="interactive-select"
  onChange={setSelectedOption}
  optionsAlign={optionsAlign}
  optionsClassName={optionsClassName}
@@ -99,6 +100,7 @@ function InteractiveExampleUsingFunctionChildren() {
  as="div"
  className="w-60"
  data-testid="dropdown"
+ name="interactive-with-children"
  onChange={setSelectedOption}
  value={selectedOption}
  >

src/components/Select/Select.test.tsx

@@ -61,7 +61,11 @@ describe('<Select />', () => {
 
  it('throws an error if children is used without labeling', () => {
  const dropdownWithChildrenAndLabelText = (
- <Select onChange={() => undefined} value={exampleOptions[0]}>
+ <Select
+ name="throwing-select"
+ onChange={() => undefined}
+ value={exampleOptions[0]}
+ >
  <Select.Button>Select</Select.Button>
 
  <Select.Options>
@@ -86,7 +90,11 @@ describe('<Select />', () => {
 
  it('does not throw an error if select uses <Select.Label>', () => {
  const dropdownWithDropdownLabel = (
- <Select onChange={() => undefined} value={exampleOptions[0]}>
+ <Select
+ name="non-throwing-select"
+ onChange={() => undefined}
+ value={exampleOptions[0]}
+ >
  <Select.Label>Options:</Select.Label>
  <Select.Button>Select</Select.Button>
 

src/components/Select/Select.tsx

@@ -26,6 +26,8 @@ type PropsWithRenderProp<RenderPropArg> = {
  as?: ElementType;
 };
 
+let showNameWarning = true;
+
 type SelectProps = ExtractProps<typeof Listbox> &
  PopoverOptions & {
  /**
@@ -41,11 +43,10 @@ type SelectProps = ExtractProps<typeof Listbox> &
  */
  className?: string;
  /**
- * The style of the select.
- *
- * Compact renders select trigger button that is only as wide as the content.
+ * Name of the form element, which triggers the generation of a hidden form field.
+ * @see https://headlessui.com/react/listbox#using-with-html-forms
  */
- variant?: VariantType;
+ name?: string;
  /**
  * Align select's popover to the left (default) or right of the trigger button's bottom edge.
  * @deprecated
@@ -58,6 +59,12 @@ type SelectProps = ExtractProps<typeof Listbox> &
  * include the width property to define the options menu width.
  */
  optionsClassName?: string;
+ /**
+ * The style of the select.
+ *
+ * Compact renders select trigger button that is only as wide as the content.
+ */
+ variant?: VariantType;
  };
 
 function childrenHaveLabelComponent(children?: ReactNode): boolean {
@@ -95,28 +102,38 @@ const SelectContext = React.createContext<SelectContextType>({});
  */
 export function Select(props: SelectProps) {
  const {
- className,
- children,
  'aria-label': ariaLabel,
- // Defaulting to null is required to explicitly state that this component is controlled, and prevents warning from Headless
- value = null,
- variant,
+ children,
+ className,
+ modifiers = defaultPopoverModifiers,
+ name,
+ onFirstUpdate,
  optionsAlign,
  optionsClassName,
  placement = 'bottom-start',
- modifiers = defaultPopoverModifiers,
  strategy,
- onFirstUpdate,
+ // Defaulting to null is required to explicitly state that this component is controlled, and prevents warning from Headless
+ value = null,
+ variant,
  ...other
  } = props;
 
+ if (process.env.NODE_ENV !== 'production' && !name && showNameWarning) {
+ console.warn(
+ "%c`Select` won't render a form field unless you include a `name` prop.\n\n See https://headlessui.com/react/listbox#using-with-html-forms for more information",
+ 'font-weight: bold',
+ );
+ showNameWarning = false;
+ }
+
  // Translate old optionsAlign to placement values
  // TODO: when removing optionsAlign, also remove this
  const optionsPlacement: SelectProps['placement'] = optionsAlign
  ? ({ left: 'bottom-start', right: 'bottom-end' }[
  optionsAlign
  ] as SelectProps['placement'])
  : placement;
+
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const { styles: popperStyles, attributes: popperAttributes } = usePopper(