Is it possible to type Select's value not as string?

[frederikhors]

Thanks for this amazing project! I just discovered it and it's amazing!

I'm using the Select component.

It works amazingly well, but I have an issue with typings.

I created a small reproduction: https://svelte.dev/playground/dbc5da74256945beab6defbe6ed53548?version=latest.

Here the code:

<script lang="ts">
	import { Select } from 'bits-ui';

    type PlayerType = 'ONE' | 'TWO';

	const playerTypes = {
		One: 'ONE',
		Two: 'TWO'
	};

	const items = Object.entries(playerTypes).map(([label, value]) => ({
		label,
		value: value as PlayerType
	}));

	let value = $state();
</script>

<Select.Root
    type="multiple"
    {items}
    onValueChange={(val) => {
        // here val is "string[]" and not "PlayerType[]"
        console.log('val:', val);
    }}
    // "value" is "string" too
    bind:value={value}
>
    <Select.Trigger>
        <Select.Value placeholder="Choose" />
    </Select.Trigger>

    <Select.Portal>
        <Select.Content class="bg-white">
            {#each items as { value, label } (value)}
                <Select.Item {value} {label}>
                    {#snippet children()}
                        {label}
                    {/snippet}
                </Select.Item>
            {/each}
        </Select.Content>
    </Select.Portal>
</Select.Root>

Is there a way to correctly type the val a value without manually cast them?

[Nic-Polumeyv]

Bits UI types the value as string/string[] on purpose, since it ends up in a DOM hidden input, so your union can't flow through the library. A generic wrapper gets it back:

<script lang="ts" generics="T extends string">
	import { Select, type WithoutChildren } from 'bits-ui';

	type Props = Omit<WithoutChildren<Select.RootProps>, 'value' | 'onValueChange' | 'type'> & {
		value?: T[];
		onValueChange?: (value: T[]) => void;
		items: { value: T; label: string; disabled?: boolean }[];
	};

	let { value = $bindable(), items, onValueChange, ...restProps }: Props = $props();
</script>

<Select.Root
	type="multiple"
	bind:value={value as never}
	onValueChange={onValueChange as never}
	{...restProps}
>
	<!-- trigger and content as in the reusable example -->
</Select.Root>

T is inferred from the items you pass, so in the consumer value and the onValueChange argument are PlayerType[] with no casts; the two as never stay confined to the wrapper. Fully cast-free isn't possible today because Select.RootProps is not generic.