asChild Prop

Although the provided components are the recommended and easiest way to use Formsnap, they aren't the only way. If you prefer to bring your own components or use native HTML elements, that's fine too.

The asChild prop is available on all components that render native HTML elements under the hood. When set to true, Formsnap won't render the default element and will expect you to spread the *Attrs slot prop into a custom element or component of your choosing.

Usage Example

If you wanted to use your own custom Label component or use scoped styles with a <label> element, you can do so by passing the asChild prop to the Label component.

	<script lang="ts">
	import { Label } from "formsnap";
</script>
 
<Label asChild let:labelAttrs>
	<label {...labelAttrs} class="label">Name</label>
</Label>
 
<style>
	label {
		color: green;
	}
</style>