diff --git a/example/components/RFCSelect.tsx b/example/components/RFCSelect.tsx
index fe9c338..23a0c39 100644
--- a/example/components/RFCSelect.tsx
+++ b/example/components/RFCSelect.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { createHost, createSlot } from 'create-slots/rfc'
 
 import { Item } from './RFCItem'
@@ -8,12 +8,13 @@ const SelectDivider = createSlot('hr')
 
 export const Select = (props: React.ComponentProps<'ul'>) => {
   const [selected, setSelected] = useState<React.ReactNode>(null)
+  const indexRef = useRef(0)
 
   return (
     <div>
       <div>Selected: {selected}</div>
       {createHost(props.children, (slots) => {
-        let index = 0
+        indexRef.current = 0
         return (
           <ul {...props}>
             {slots.map((slot) => {
@@ -23,11 +24,11 @@ export const Select = (props: React.ComponentProps<'ul'>) => {
                 return (
                   <Item
                     key={slot.key}
-                    {...slot.props}
+                    {...itemProps}
                     {...{
                       role: 'button',
                       tabIndex: 0,
-                      'data-index': index,
+                      'data-index': indexRef.current++,
                       'aria-selected': itemProps.children === selected,
                       onClick: () => {
                         setSelected(itemProps.value)
diff --git a/src/__fixtures__/RFCSelect.tsx b/src/__fixtures__/RFCSelect.tsx
new file mode 100644
index 0000000..277f2ff
--- /dev/null
+++ b/src/__fixtures__/RFCSelect.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react'
+
+import { createHost, createSlot } from '../rfc'
+
+const Divider = (props: React.ComponentPropsWithoutRef<'hr'>) => (
+  <hr {...props} />
+)
+
+const SelectItem = createSlot('li')
+const SelectDivider = createSlot(Divider)
+
+export const Select = (props: React.ComponentPropsWithoutRef<'ul'>) => {
+  const [selected, setSelected] = React.useState<React.ReactElement>()
+  const indexRef = React.useRef(0)
+
+  return (
+    <div>
+      <div>Selected: {selected?.props.value ?? ''}</div>
+      {createHost(props.children, (slots) => {
+        indexRef.current = 0
+        return (
+          <ul {...props}>
+            {slots.map((slot) => {
+              if (slot.type === SelectItem) {
+                const itemProps = slot.props
+
+                return (
+                  <li
+                    key={slot.key}
+                    ref={slot.ref}
+                    {...itemProps}
+                    {...{
+                      'data-index': indexRef.current++,
+                      'aria-selected': slot === selected,
+                      onClick: () => {
+                        setSelected(slot)
+                      },
+                    }}
+                  />
+                )
+              }
+
+              return slot
+            })}
+          </ul>
+        )
+      })}
+    </div>
+  )
+}
+
+Select.Item = SelectItem
+Select.Divider = SelectDivider
diff --git a/src/__fixtures__/SimpleField.tsx b/src/__fixtures__/SimpleField.tsx
new file mode 100644
index 0000000..bf2d20b
--- /dev/null
+++ b/src/__fixtures__/SimpleField.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react'
+
+import { createHost, createSlot } from '../simple'
+
+const Description = (props: React.ComponentPropsWithoutRef<'span'>) => (
+  <span {...props} />
+)
+
+const FieldLabel = createSlot('label')
+const FieldInput = createSlot('input')
+const FieldDescription = createSlot(Description)
+const FieldIcon = createSlot('span')
+
+// const createFill = <P extends keyof typeof SlotComponents>(name: P) => {
+//   const FillComponent = React.forwardRef((props, ref) => {
+//     const Slots = useSlots()
+//     const [originalProps] = React.useState(() => Slots.getProps(name))
+
+//     React.useEffect(() => Slots.update(name, { ...props, ref }))
+//     React.useEffect(
+//       () => () => {
+//         originalProps ? Slots.update(name, originalProps) : Slots.unmount(name)
+//       },
+//       [Slots, originalProps]
+//     )
+
+//     return null
+//   }) as unknown as typeof SlotComponents[P]
+//   return FillComponent
+// }
+
+type FieldProps = React.ComponentPropsWithoutRef<'div'>
+
+export const Field = (props: FieldProps) => {
+  const id = ':r0:'
+  const descriptionId = ':r1:'
+
+  return createHost(props.children, (Slots) => {
+    const labelProps = Slots.getProps(FieldLabel)
+    const inputProps = Slots.getProps(FieldInput)
+    const descriptionProps = Slots.getProps(FieldDescription)
+    const iconProps = Slots.getProps(FieldIcon)
+    return (
+      <div {...props}>
+        {labelProps && <label {...labelProps} htmlFor={inputProps?.id || id} />}
+        {inputProps && (
+          <input
+            id={id}
+            aria-describedby={descriptionProps ? descriptionId : undefined}
+            {...inputProps}
+          />
+        )}
+        {(iconProps || descriptionProps) && (
+          <div>
+            {Slots.get(FieldIcon)}
+            {descriptionProps && (
+              <span {...descriptionProps} id={descriptionId} />
+            )}
+          </div>
+        )}
+      </div>
+    )
+  })
+}
+
+Field.Label = FieldLabel
+Field.Input = FieldInput
+Field.Description = FieldDescription
+Field.Icon = FieldIcon
diff --git a/src/__tests__/rfc.test.tsx b/src/__tests__/rfc.test.tsx
new file mode 100644
index 0000000..edfa319
--- /dev/null
+++ b/src/__tests__/rfc.test.tsx
@@ -0,0 +1,285 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+import { create } from '../__fixtures__/utils'
+import { Select } from '../__fixtures__/RFCSelect'
+
+test('render slots', () => {
+  const instance = create(
+    <Select>
+      <Select.Item value="foo">Foo</Select.Item>
+      <Select.Divider />
+      <Select.Item value="bar">Bar</Select.Item>
+    </Select>
+  )
+  expect(instance).toMatchInlineSnapshot(`
+<div>
+  <div>
+    Selected: 
+  </div>
+  <ul>
+    <li
+      aria-selected={false}
+      data-index={0}
+      onClick={[Function]}
+      value="foo"
+    >
+      Foo
+    </li>
+    <hr />
+    <li
+      aria-selected={false}
+      data-index={1}
+      onClick={[Function]}
+      value="bar"
+    >
+      Bar
+    </li>
+  </ul>
+</div>
+`)
+
+  // insert item
+  instance.update(
+    <Select>
+      <Select.Item value="foo">Foo</Select.Item>
+      <Select.Divider />
+      <Select.Item value="baz">Baz</Select.Item>
+      <Select.Divider />
+      <Select.Item value="bar">Bar</Select.Item>
+    </Select>
+  )
+  expect(instance).toMatchInlineSnapshot(`
+<div>
+  <div>
+    Selected: 
+  </div>
+  <ul>
+    <li
+      aria-selected={false}
+      data-index={0}
+      onClick={[Function]}
+      value="foo"
+    >
+      Foo
+    </li>
+    <hr />
+    <li
+      aria-selected={false}
+      data-index={1}
+      onClick={[Function]}
+      value="baz"
+    >
+      Baz
+    </li>
+    <hr />
+    <li
+      aria-selected={false}
+      data-index={2}
+      onClick={[Function]}
+      value="bar"
+    >
+      Bar
+    </li>
+  </ul>
+</div>
+`)
+
+  // remove item
+  instance.update(
+    <Select>
+      <Select.Item value="foo">Foo</Select.Item>
+      <Select.Divider />
+      <Select.Item value="bar">Bar</Select.Item>
+    </Select>
+  )
+  expect(instance).toMatchInlineSnapshot(`
+<div>
+  <div>
+    Selected: 
+  </div>
+  <ul>
+    <li
+      aria-selected={false}
+      data-index={0}
+      onClick={[Function]}
+      value="foo"
+    >
+      Foo
+    </li>
+    <hr />
+    <li
+      aria-selected={false}
+      data-index={1}
+      onClick={[Function]}
+      value="bar"
+    >
+      Bar
+    </li>
+  </ul>
+</div>
+`)
+
+  // update item
+  instance.update(
+    <Select>
+      <Select.Item value="foo">FooFoo</Select.Item>
+      <Select.Divider />
+      <Select.Item value="bar">Bar</Select.Item>
+    </Select>
+  )
+  expect(instance).toMatchInlineSnapshot(`
+<div>
+  <div>
+    Selected: 
+  </div>
+  <ul>
+    <li
+      aria-selected={false}
+      data-index={0}
+      onClick={[Function]}
+      value="foo"
+    >
+      FooFoo
+    </li>
+    <hr />
+    <li
+      aria-selected={false}
+      data-index={1}
+      onClick={[Function]}
+      value="bar"
+    >
+      Bar
+    </li>
+  </ul>
+</div>
+`)
+
+  // nested slots
+  instance.update(
+    <Select>
+      <Select.Item value="foo">
+        <Select>
+          <Select.Item value="foo">FooFoo</Select.Item>
+          <Select.Divider />
+          <Select.Item value="bar">Bar</Select.Item>
+        </Select>
+      </Select.Item>
+      <Select.Divider />
+      <Select.Item value="bar">Bar</Select.Item>
+    </Select>
+  )
+
+  expect(instance).toMatchInlineSnapshot(`
+<div>
+  <div>
+    Selected: 
+  </div>
+  <ul>
+    <li
+      aria-selected={false}
+      data-index={0}
+      onClick={[Function]}
+      value="foo"
+    >
+      <div>
+        <div>
+          Selected: 
+        </div>
+        <ul>
+          <li
+            aria-selected={false}
+            data-index={0}
+            onClick={[Function]}
+            value="foo"
+          >
+            FooFoo
+          </li>
+          <hr />
+          <li
+            aria-selected={false}
+            data-index={1}
+            onClick={[Function]}
+            value="bar"
+          >
+            Bar
+          </li>
+        </ul>
+      </div>
+    </li>
+    <hr />
+    <li
+      aria-selected={false}
+      data-index={1}
+      onClick={[Function]}
+      value="bar"
+    >
+      Bar
+    </li>
+  </ul>
+</div>
+`)
+})
+
+test('ref', () => {
+  const ref = { current: null }
+  render(
+    <Select>
+      <Select.Item ref={ref} value="foo">
+        Foo
+      </Select.Item>
+      <Select.Divider />
+      <Select.Item value="bar">Bar</Select.Item>
+    </Select>
+  )
+
+  expect(ref.current).toMatchInlineSnapshot(`
+<li
+  aria-selected="false"
+  data-index="0"
+  value="foo"
+>
+  Foo
+</li>
+`)
+})
+
+test('interaction', () => {
+  render(
+    <Select>
+      <Select.Item value="foo">Foo</Select.Item>
+      <Select.Divider />
+      <Select.Item value="bar">Bar</Select.Item>
+    </Select>
+  )
+
+  fireEvent.click(screen.getAllByRole('listitem')[0])
+  expect(screen.getByText('Selected: foo')).not.toBeNull()
+
+  fireEvent.click(screen.getAllByRole('listitem')[1])
+  expect(screen.getByText('Selected: bar')).not.toBeNull()
+})
+
+test('dev warning', () => {
+  const warn = jest.spyOn(console, 'warn').mockImplementation()
+  render(
+    <Select>
+      <Select.Item value="foo">Foo</Select.Item>
+      Divider
+    </Select>
+  )
+  expect(warn).toHaveBeenCalledTimes(0)
+
+  // @ts-ignore
+  process.env.NODE_ENV = 'development'
+  render(
+    <Select>
+      <Select.Item value="foo">Foo</Select.Item>
+      Divider
+    </Select>
+  )
+  expect(warn).toHaveBeenCalledTimes(1)
+  expect(warn).toHaveBeenCalledWith(
+    'Unwrapped children found in "Host", either wrap them in subcomponents or remove'
+  )
+})
diff --git a/src/__tests__/simple.test.tsx b/src/__tests__/simple.test.tsx
new file mode 100644
index 0000000..fe8e939
--- /dev/null
+++ b/src/__tests__/simple.test.tsx
@@ -0,0 +1,181 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+
+import { create } from '../__fixtures__/utils'
+import { Field } from '../__fixtures__/SimpleField'
+
+test('render slots', () => {
+  const instance = create(
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Input />
+      <Field.Icon>-</Field.Icon>
+      <Field.Description>Description</Field.Description>
+    </Field>
+  )
+  expect(instance).toMatchInlineSnapshot(`
+    <div>
+      <label
+        htmlFor=":r0:"
+      >
+        Label
+      </label>
+      <input
+        aria-describedby=":r1:"
+        id=":r0:"
+      />
+      <div>
+        <span>
+          -
+        </span>
+        <span
+          id=":r1:"
+        >
+          Description
+        </span>
+      </div>
+    </div>
+  `)
+
+  // arbitrary order
+  instance.update(
+    <Field>
+      <Field.Icon>-</Field.Icon>
+      <Field.Input />
+      <Field.Description>Description</Field.Description>
+      <Field.Label>Label</Field.Label>
+    </Field>
+  )
+  expect(instance).toMatchInlineSnapshot(`
+    <div>
+      <label
+        htmlFor=":r0:"
+      >
+        Label
+      </label>
+      <input
+        aria-describedby=":r1:"
+        id=":r0:"
+      />
+      <div>
+        <span>
+          -
+        </span>
+        <span
+          id=":r1:"
+        >
+          Description
+        </span>
+      </div>
+    </div>
+  `)
+
+  // dynamic content
+  instance.update(
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Input id="input-id" />
+    </Field>
+  )
+
+  expect(instance).toMatchInlineSnapshot(`
+    <div>
+      <label
+        htmlFor="input-id"
+      >
+        Label
+      </label>
+      <input
+        id="input-id"
+      />
+    </div>
+  `)
+
+  // nested slots
+  instance.update(
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Input id="input-id" />
+      <Field.Description>
+        <Field>
+          <Field.Label>Label</Field.Label>
+          <Field.Input />
+        </Field>
+      </Field.Description>
+    </Field>
+  )
+
+  expect(instance).toMatchInlineSnapshot(`
+    <div>
+      <label
+        htmlFor="input-id"
+      >
+        Label
+      </label>
+      <input
+        aria-describedby=":r1:"
+        id="input-id"
+      />
+      <div>
+        <span
+          id=":r1:"
+        >
+          <div>
+            <label
+              htmlFor=":r0:"
+            >
+              Label
+            </label>
+            <input
+              id=":r0:"
+            />
+          </div>
+        </span>
+      </div>
+    </div>
+  `)
+})
+
+test('ref', () => {
+  const ref = { current: null }
+  render(
+    <Field>
+      <Field.Label ref={ref}>Label</Field.Label>
+      <Field.Input />
+      <Field.Icon>-</Field.Icon>
+      <Field.Description>Description</Field.Description>
+    </Field>
+  )
+
+  expect(ref.current).toMatchInlineSnapshot(`
+<label
+  for=":r0:"
+>
+  Label
+</label>
+`)
+})
+
+test('dev warning', () => {
+  const warn = jest.spyOn(console, 'warn').mockImplementation()
+  render(
+    <Field>
+      <Field.Label>Label</Field.Label>
+      Input
+    </Field>
+  )
+  expect(warn).toHaveBeenCalledTimes(0)
+
+  // @ts-ignore
+  process.env.NODE_ENV = 'development'
+  render(
+    <Field>
+      <Field.Label>Label</Field.Label>
+      Input
+    </Field>
+  )
+  expect(warn).toHaveBeenCalledTimes(1)
+  expect(warn).toHaveBeenCalledWith(
+    'Unwrapped children found in "Host", either wrap them in subcomponents or remove'
+  )
+})
diff --git a/src/__tests__/ssr.test.tsx b/src/__tests__/ssr.test.tsx
index 3673bd7..0d570d9 100644
--- a/src/__tests__/ssr.test.tsx
+++ b/src/__tests__/ssr.test.tsx
@@ -8,6 +8,8 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { Field } from '../__fixtures__/Field'
 import { StaticField } from '../__fixtures__/StaticField'
 import { Select } from '../__fixtures__/Select'
+import { Select as RFCSelect } from '../__fixtures__/RFCSelect'
+import { Field as SimpleField } from '../__fixtures__/SimpleField'
 
 test('default SSR', () => {
   const markup = renderToStaticMarkup(
@@ -91,3 +93,51 @@ test('list SSR', () => {
     `"<div><div>Selected: </div><ul><li value=\\"foo\\" data-index=\\"0\\" aria-selected=\\"false\\">Foo</li><hr/><li value=\\"bar\\" data-index=\\"1\\" aria-selected=\\"false\\">Bar</li></ul></div>"`
   )
 })
+
+test('rfc SSR', () => {
+  const markup = renderToStaticMarkup(
+    <RFCSelect>
+      <RFCSelect.Item value="foo">Foo</RFCSelect.Item>
+      <RFCSelect.Divider />
+      <RFCSelect.Item value="bar">Bar</RFCSelect.Item>
+    </RFCSelect>
+  )
+  expect(markup).toMatchInlineSnapshot(
+    `"<div><div>Selected: </div><ul><li value=\\"foo\\" data-index=\\"0\\" aria-selected=\\"false\\">Foo</li><hr/><li value=\\"bar\\" data-index=\\"1\\" aria-selected=\\"false\\">Bar</li></ul></div>"`
+  )
+})
+
+test('simple SSR', () => {
+  const markup = renderToStaticMarkup(
+    <SimpleField>
+      <SimpleField.Label>Label</SimpleField.Label>
+      <SimpleField.Input id="input-id" />
+      <SimpleField.Description>
+        <SimpleField>
+          <SimpleField.Label>Label</SimpleField.Label>
+          <SimpleField.Input />
+        </SimpleField>
+      </SimpleField.Description>
+    </SimpleField>
+  )
+
+  expect(markup).toMatchInlineSnapshot(
+    `"<div><label for=\\"input-id\\">Label</label><input id=\\"input-id\\" aria-describedby=\\":r1:\\"/><div><span id=\\":r1:\\"><div><label for=\\":r0:\\">Label</label><input id=\\":r0:\\"/></div></span></div></div>"`
+  )
+
+  // arbitrary order
+  const markup1 = renderToStaticMarkup(
+    <SimpleField>
+      <SimpleField.Description>
+        <SimpleField>
+          <SimpleField.Label>Label</SimpleField.Label>
+          <SimpleField.Input />
+        </SimpleField>
+      </SimpleField.Description>
+      <SimpleField.Label>Label</SimpleField.Label>
+      <SimpleField.Input id="input-id" />
+    </SimpleField>
+  )
+
+  expect(markup1).toEqual(markup)
+})
diff --git a/src/rfc/SlotsManager.ts b/src/rfc/SlotsManager.ts
index 3c934c3..edf7160 100644
--- a/src/rfc/SlotsManager.ts
+++ b/src/rfc/SlotsManager.ts
@@ -1,5 +1,7 @@
 import * as React from 'react'
 
+import { SlotElement } from './utils'
+
 type Key = React.Key
 
 export const createSlotsManager = (onChange: (key: Key) => void) => {
@@ -23,7 +25,7 @@ export const createSlotsManager = (onChange: (key: Key) => void) => {
       return itemMap.has(key)
     },
     get() {
-      return Array.from(itemMap.values())
+      return Array.from(itemMap.values()) as SlotElement[]
     },
   }
 }
diff --git a/src/rfc/index.tsx b/src/rfc/index.tsx
index 392cf46..eb1172a 100644
--- a/src/rfc/index.tsx
+++ b/src/rfc/index.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react'
 
 import { createSlotsContext, getComponentName } from '../utils'
+import { DevChildren } from '../DevChildren'
 import { ScanContext, ScanProvider } from '../ScanContext'
 import { createSlotsManager } from './SlotsManager'
+import { SlotElement } from './utils'
 
-export * from '../utils'
+export * from './utils'
 
 type Slots = ReturnType<typeof createSlotsManager>
-type Callback = (Slots: React.ReactElement[]) => JSX.Element | null
+type Callback = (slots: SlotElement[]) => JSX.Element | null
 
 const SlotsContext = createSlotsContext<Slots | undefined>(undefined)
 
@@ -38,7 +40,13 @@ export const Host = ({
   return (
     <>
       <SlotsContext.Provider value={Slots}>
-        <ScanProvider>{children}</ScanProvider>
+        <ScanProvider>
+          {process.env.NODE_ENV === 'development' ? (
+            <DevChildren name={'Host'}>{children}</DevChildren>
+          ) : (
+            children
+          )}
+        </ScanProvider>
       </SlotsContext.Provider>
       <Template>{() => callback(Slots.get())}</Template>
     </>
diff --git a/src/rfc/utils.ts b/src/rfc/utils.ts
index 523cc6a..c15934d 100644
--- a/src/rfc/utils.ts
+++ b/src/rfc/utils.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-type SlotElement<T extends React.ElementType> = React.ReactElement<
+export type SlotElement<T extends React.ElementType=any> = React.ReactElement<
   React.ComponentPropsWithRef<T>,
   T
 > & {
diff --git a/src/simple/index.tsx b/src/simple/index.tsx
index 80e023a..91a693e 100644
--- a/src/simple/index.tsx
+++ b/src/simple/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import { createSlotsContext, getComponentName } from '../utils'
+import { DevChildren } from '../DevChildren'
 import { createSlotsManager } from './SlotsManager'
 
 type Slots = ReturnType<typeof createSlotsManager>
@@ -27,7 +28,13 @@ export const Host = ({
 
   return (
     <>
-      <SlotsContext.Provider value={Slots}>{children}</SlotsContext.Provider>
+      <SlotsContext.Provider value={Slots}>
+        {process.env.NODE_ENV === 'development' ? (
+          <DevChildren name={'Host'}>{children}</DevChildren>
+        ) : (
+          children
+        )}
+      </SlotsContext.Provider>
       <Template>{() => callback(Slots)}</Template>
     </>
   )