Svelte Components
Quick Start
Component libraries: Bits UI (headless) | Ark UI | Melt UI (primitives)
Form trick: Use form attribute when form can't wrap inputs:
<form id="my-form" action="/submit"><!-- outside table --></form> <table> <tr> <td><input form="my-form" name="email" /></td> <td><button form="my-form">Submit</button></td> </tr> </table>
Web Components
// svelte.config.js export default { compilerOptions: { customElement: true, }, };
<!-- MyButton.svelte --> <svelte:options customElement="my-button" />
<button><slot /></button>
Reference Files
-
component-libraries.md - Bits UI, Ark UI setup
-
web-components.md - Building custom elements
-
form-patterns.md - Advanced form handling
Notes
-
Bits UI 1.0: flexible, unstyled, accessible components for Svelte
-
Form defaultValue attribute enables easy form resets
-
Use snippets to wrap rich HTML in custom select options
-
Last verified: 2025-01-14