spences10 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
defaultValueattribute enables easy form resets - Use snippets to wrap rich HTML in custom select options
- Last verified: 2025-01-14