Adding "required" support for listbox

[maxratajczak]

I can see that when using the listbox a native html input element is rendered hidden for proper html form support, however this doesn't allow native "required" support for the element. Possible change could be rendering a select element behind the listbox so that the browser "required" message shows on error. I implemented this myself in my own project but I thought it would be a great feature to add for everyone.

[h-joshua]

Hey @maxratajczak,
could you maybe share your solution with me, I don't quite understand how you could implement the "required" property in Listbox by yourself.
I'm also looking forward to seeing this feature natively in Listboxes:)

[maxratajczak]

Hey Josh, for sure, I'll send my custom Select component. The "required" part is at the end which is conditionally rendered if required prop is valid/true. What I do is render a div > div & select under the HeadlessUI listbox so that the second div is placed on top of the select and makes it unclickable. The select is also un focusable, visually hidden, hidden from screen readers, set to a height of 1 and set to a full width so that the native browser alerts are positioned properly. (Like in the image below)

The value of the listbox is synced with the select so that the required prop works as intended.
Here's the component. If you have any questions lmk.

`import { IconChevronDown, IconChevronUp } from "@tabler/icons";
import { Listbox } from "@headlessui/react";
import { CSSProperties, useCallback, useState } from "react";

enum SELECT_HEIGHT {
"sm" = "35px",
"md" = "45px",
"lg" = "55px"
}

enum SELECT_TEXT {
"sm" = "1.4rem",
"md" = "1.6rem",
"lg" = "1.8rem"
}

enum SELECT_RADIUS {
"sm" = "5px",
"md" = "8px",
"lg" = "11px"
}

enum SELECT_PADDING {
"sm" = "12px",
"md" = "14px",
"lg" = "16px"
}

enum OPTION_PADDING {
"sm" = "10px 12px",
"md" = "12px 14px",
"lg" = "14px 16px"
}

type Props = {
data: any[],
value: string | number | null | undefined,
label?: string,
name?: string,
title?: string,
onChange: (v: string) => void,
placeholder?: string,
disabled?: boolean,
required?: boolean,
size?: "sm" | "md" | "lg",
maxHeight?: number,
rightSectionWidth?: number,
rightSectionProps?: any
leftSectionWidth?: number,
leftSectionProps?: any,
dropdownPosition?: "top" | "bottom",
style?: CSSProperties
mt?: number,
mr?: number,
mb?: number,
ml?: number,
}

const Select = ({data, value, label, name, title, onChange, placeholder, disabled, required, size = "md", maxHeight = 250, rightSectionWidth = 45, rightSectionProps, leftSectionWidth = 45, leftSectionProps, dropdownPosition = "bottom", style, mt, mr, mb, ml}: Props) => {
const [height, setHeight] = useState(0);

const DropdownRef = useCallback((ref: HTMLUListElement) => {
    setHeight(ref?.clientHeight);
}, []);


const DefaultIcon = () => {
    return (
    <div className="flex flex-col items-center">
        <IconChevronUp color="var(--input-ph-clr)" size={15} stroke={2.8} className="mb-[-4px]"/>
        <IconChevronDown color="var(--input-ph-clr)" size={15} stroke={2.8}/>
    </div>
    );
}

return (
<div
className="relative w-full"
style={Object.assign({},
    mt && {"marginTop": mt},
    mr && {"marginRight": mr},
    mb && {"marginBottom": mb},
    ml && {"marginLeft": ml},
    {...style}
)}
>
    <Listbox value={value} onChange={onChange} disabled={disabled} name={name}>
        {label &&
        <Listbox.Label
        className="mb-[5px] inline-block break-words"
        style={Object.assign({},
            {"fontSize": SELECT_TEXT[size]},
        )}>
            {label}
        {required && <span aria-hidden="true" className="text-[var(--error-color)] ml-[2px]">*</span>}</Listbox.Label>}
        
        <div className="relative">
            <Listbox.Button
            title={title}
            className="relative text-clip w-full whitespace-nowrap overflow-hidden cursor-pointer bg-[var(--input-bg-clr)] text-left focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-[var(--focus-color)] disabled:bg-[var(--input-bg-clr-disabled)] disabled:cursor-not-allowed"
            style={Object.assign({},
                {"height": SELECT_HEIGHT[size]},
                {"borderRadius": SELECT_RADIUS[size]},
                {"paddingLeft": `${leftSectionProps ? `${leftSectionWidth}px` : SELECT_PADDING[size]}`},
                {"paddingRight": `${rightSectionWidth}px`},
                {"fontSize": SELECT_TEXT[size]},
                {"color": `${disabled ? "var(--input-txt-clr-disabled)" : `${value ? "black" : "var(--input-ph-clr)"}`}`}
            )}
            >
                {leftSectionProps &&
                <div
                className="absolute !text-[var(--input-ph-clr)] left-0 top-0 h-full flex flex-col items-center justify-center"
                style={Object.assign({},
                    {"width": `${leftSectionWidth}px`},
                    {"backgroundColor": `${disabled ? "var(--input-bg-clr-disabled)" : "var(--input-bg-clr)"}`}
                )}
                >
                    {leftSectionProps}
                </div>
                }

                <span className="whitespace-nowrap overflow-hidden">{(value ? value : placeholder)}</span>

                <div
                className="absolute !text-[var(--input-ph-clr)] right-0 top-0 h-full flex flex-col items-center justify-center"
                style={Object.assign({},
                    {"width": `${rightSectionWidth}px`},
                    {"backgroundColor": `${disabled ? "var(--input-bg-clr-disabled)" : "var(--input-bg-clr)"}`}
                )}
                >
                    {rightSectionProps ? rightSectionProps : <DefaultIcon/>}
                </div>
            </Listbox.Button>
            <Listbox.Options
            ref={DropdownRef}
            className="SelectScrollbar absolute flex flex-col gap-y-[3px] p-[5px] z-[5002] w-full bg-white !outline-none shadow-md border border-neutral-300"
            style={Object.assign({},
                {"borderRadius": SELECT_RADIUS[size]},
                {"maxHeight": `${maxHeight}px`},
                {"overflow": "overlay"},
                dropdownPosition === "bottom" && {"marginTop": "8px"},
                dropdownPosition === "top" && {"top":  `-${height + 9}px`}
            )}
            >
                {data.map((e: any, i: number) => {
                    return (
                        <Listbox.Option
                        key={i}
                        value={e}
                        style={Object.assign({},
                            {"padding": OPTION_PADDING[size]},
                            {"fontSize": SELECT_TEXT[size]},
                        )}
                        className={({ active, selected }) => `cursor-pointer select-none rounded-[5px] ${active ? "bg-gray-100" : ""} ${selected ? "bg-primary text-white" : ""}`}
                        >
                            {e}
                        </Listbox.Option>
                    );
                })}
            </Listbox.Options>
        </div>
    </Listbox>
    {required &&
    <div
    className="isolate opacity-0 select-none" aria-hidden="true" tabIndex={-1}
    style={Object.assign({},
        {"cursor": `${disabled ? "not-allowed" : "pointer"}`}
    )}
    >
        <div className="absolute z-10 w-full h-[1px] bottom-[15px] opacity-0 left-0" aria-hidden="true" tabIndex={-1}></div>
        <select disabled={disabled} onClick={() => {}} onChange={() => {}} tabIndex={-1} value={value === null ? undefined : value} name={name} required={required} aria-hidden="true" autoCapitalize="off" autoComplete="off" className="w-full z-0 h-[1px] select-none text-transparent bg-transparent absolute bottom-[15px] left-0 !outline-none opacity-0 shadow-none appearance-none">
            <option value="" defaultChecked aria-hidden="true"></option>
            {data.map((e: any, i: number) => {
                return <option key={i} value={e} aria-hidden="true">{e}</option>
            })}
        </select>
    </div>
    }
</div>
);

}

export default Select;`

[h-joshua]

Hey Max,
thank you! You helped me a lot. I implemented it in my vue component and it works fine. Since I am new to frontend development, I didn't come up with this idea.

[MANTENN]

Add role="combobox" to listbox.button and pass aria-required

[sxppro]

Are you able to provide an example? I have tried this, though I can't seem to get it to work