Please use @rgossiaux/svelte-headlessui instead as it is a full port of Headless UI. I had only managed to complete the Switch component, but @rgossiaux has done a fantastic job in getting full API coverage.
Unofficial Headless UI Svelte components. Very much a work in progress, use with caution.
npm install @mattjennings/headlessui-svelte
See Components for which are available.
The goal is to keep the API as close to @headlessui/react
as possible.
<script>
import { Switch } from "@mattjennings/headlessui-svelte";
let enabled = false;
</script>
<Switch.Group>
<div class="flex items-center">
<Switch.Label class="mr-4">Enable notifications</Switch.Label>
<Switch
bind:checked={enabled}
class={`${
enabled ? "bg-blue-600" : "bg-gray-200"
} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`}>
<span
class={`${
enabled ? "translate-x-6" : "translate-x-1"
} inline-block w-4 h-4 transform bg-white rounded-full transition-transform`} />
</Switch>
</div>
</Switch.Group>
For comparison, this is the @headlessui/react
version:
import { useState } from 'react'
import { Switch } from '@headlessui/react'
export default function CustomLabelExample() {
const [enabled, setEnabled] = useState(false)
return (
<Switch.Group>
<div className="flex items-center">
<Switch.Label className="mr-4">Enable notifications</Switch.Label>
<Switch
checked={enabled}
onChange={setEnabled}
className={`${
enabled ? 'bg-blue-600' : 'bg-gray-200'
} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`}
>
<span
className={`${
enabled ? 'translate-x-6' : 'translate-x-1'
} inline-block w-4 h-4 transform bg-white rounded-full transition-transform`}
/>
</Switch>
</div>
</Switch.Group>
)
}
Until the on:* syntax is supported in Svelte, each internal component will need to explicitly forward every possible event so that they can be used. The scope of this package is small enough that I could do that, but it would be annoying.
One idea is to go the React-way and use on-*
props for event listeners. This would not be the ideal API, but it would work.
For now, components will at least emit the following events:
click
focus
blur
keypress
keydown
keyup
Until dynamic elements are supported in Svelte, I'm using a modified internal version of svelte-elements to support the as
prop.
You might get the following error (or similar) when running in development with SvelteKit:
Cannot read property 'default' of null
This can be fixed by either restarting the dev server (for some reason it only happens the first time), or adding the library to kit.vite.optimizeDeps.exclude
in svelte.config.js:
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
vite: {
optimizeDeps: {
exclude: ['@mattjennings/headlessui-svelte']
}
}
}
}