Skip to main content


A <Slot> is used to replace a named layout slot in a parent component with your own implementation. This is useful when you want to customize the layout of a component, but still want to use the default implementation for the rest of the layout. The parent component is still responsible for composing the layout - if multiple slots can be passed in, the order of the <Slot> components is not important.


The parent component must document the slot names - only the correctly named <Slot> components will be rendered. Any other components will be ignored.


The <Form> component exposes named slots that can be used to customize the layout. The following example shows how to use the error and footer slots:

import { Slot, Form } from "@slashid/react"

function CustomForm() {
return (
<Slot name="error">
<p>An error happened!</p>
<Slot name="footer">
<footer>My custom footer</footer>

The parent component will usually render a default component for each named slot you haven't populated with a <Slot> component. For example, the <Form> component will render a default error message if you don't provide a <Slot name="error">.


namestringName of the slot that must correspond to any of the documented slot names of the parent component.