<Slot>

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.

caution

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

Usage

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 (
    <Form>
      <Slot name="error">
        <p>An error happened!</p>
      </Slot>
      <Slot name="footer">
        <footer>My custom footer</footer>
      </Slot>
    </Form>
  )
}

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">.

Props

Prop	Type	Default	Description
name	string		Name of the slot that must correspond to any of the documented slot names of the parent component.