-
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Svelte 5: Typescript error on custom radio due to bind:group not being bindable #13501
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
|
It's some Svelte magic to get/set the current value of multiple checkboxes/radio buttons: |
You have to do that anyway unless the component contains all members of the group.
Don't know if anything about that limitation changes in Svelte 5. |
This isn't an issue with using a set of radios in the UI, but in writing a Svelte 5 component that wraps a radio input and can expose the same bind:group property as the native input element does with Svelte. For example, in my component UI library I have a radio component that has custom styles. |
Looks like the previous limitation does no longer apply, also don't see any issue typing-wise, you can use an intersection: <script lang="ts">
import type { Snippet } from "svelte";
import type { HTMLInputAttributes } from "svelte/elements";
let {
children,
group = $bindable(), // <- required for bindings
...rest
}: {
children: Snippet;
group?: any;
} & HTMLInputAttributes = $props();
</script>
<input type="radio" bind:group {...rest} />
{#if children}
<label for={rest.id}>
{@render children()}
</label>
{/if} |
This is a problem only for a checkbox group but not a radio group. |
In Svelte 4 neither seem to work, in v5 only checkboxes don't work 🤔 |
Can you provide a checkboxes example that doesn't work please? |
I am referring only to the case where the checkbox is extracted (which was never supported so far). |
It's missing |
Describe the bug
When writing a custom radio input component that passes ...rest to the rendered input element, callers get a typescript error for bind:group not being bindable. This makes it impossible to create a custom radio component without re-implementing all of group behavior.
HTMLInputAttributes in svelte/elements lists 'bind:group'.
Attempted workaround #1: Added group as a local $props() variable in CustomRadio, and binding to the input element, but group is not a property on HTMLInputAttributes.
Attempted workaround #2: Added "bind:group": group as a local $props() variable in CustomRadio, but the caller error still exists.
Attempted workaround #3: Added "bind:group": group = $bindable(undefined) as a local $props() variable in CustomRadio, but the caller error still exists.
Reproduction
REPL repro
Logs
No response
System Info
Severity
blocking an upgrade
The text was updated successfully, but these errors were encountered: