diff --git a/packages/core/src/useCheckbox/index.md b/packages/core/src/useCheckbox/index.md
deleted file mode 100644
index c7806d26..00000000
--- a/packages/core/src/useCheckbox/index.md
+++ /dev/null
@@ -1,113 +0,0 @@
-# Checkbox
-
-Checkboxes allow the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. Unlike Radios, checkboxes can used on their own. For example, agreeing to the terms and conditions or subscribing to a newsletter. But checkboxes are more nuanced than that.
-
-They can also be used to represent options from a list of options, in this situation they are considered a group and multiple checkboxes can be selected at once.
-
-Also checkboxes do not just have a binary choice, they can also have a "mixed" or "indeterminate" state. This is useful for representing a group of checkboxes as a while having some, none or all of the checkboxes selected. This is also known as being "partially checked".
-
-[Aria Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)
-
-## Features
-
-You can build checkboxes using either the native HTML `input[type="checkbox"]` elements or custom elements. We provide the behavior, state and accessibility implementation for both cases.
-
-- Keyboard focus management.
-- Aria attributes are automatically added to the radio group and radio fields.
-- Pressing <kbd>Space</kbd> to toggle the checkbox checked state.
-- Errors and validation.
-- Support for `indeterminate` state and tri-state checkboxes.
-
-You can also build checkbox groups, in a similar manner to radio groups.
-
-## useCheckbox
-
-Provides the behavior, state and accessibility implementation for checkbox items. Checkbox items can be built with or without `input` elements depending on your styling and behavior needs.
-
-### With input elements
-
-This is how you would build a custom checkbox item component using the `useCheckbox` composable.
-
-```vue
-<script setup lang="ts">
-import { CheckboxProps, useCheckbox } from '@formwerk/core';
-
-const props = defineProps<CheckboxProps>();
-
-const { labelProps, inputProps } = useCheckbox(props);
-</script>
-
-<template>
-  <div class="flex items-center">
-    <input v-bind="inputProps" />
-
-    <label v-bind="labelProps" class="ml-1">{{ label }}</label>
-  </div>
-</template>
-```
-
-### Without input elements
-
-For special styling needs, you don't have to use the `input` element. You will be using `checkboxProps` instead of `inputProps`.
-
-```vue
-<script setup lang="ts">
-import { CheckboxProps, useCheckbox } from '@formwerk/core';
-
-const props = defineProps<CheckboxProps>();
-
-const { labelProps, checkboxProps, isChecked } = useCheckbox(props);
-</script>
-
-<template>
-  <div v-bind="checkboxProps" class="flex items-center">
-    <div
-      class="w-5 h-5 rounded-md flex-shrink-0 border border-gray-600 flex items-center justify-center focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-    >
-      <div class="w-3 h-3 rounded-md flex-shrink-0" :class="{ 'bg-blue-500': isChecked }" />
-    </div>
-
-    <span v-bind="labelProps" class="ml-1">{{ label }}</span>
-  </div>
-</template>
-```
-
-## useCheckboxGroup
-
-Provides the behavior, state and accessibility implementation for group components.
-
-- A checkbox group can have a `v-model` bound to it.
-- A checkbox group considers all children that call `useCheckbox` as one item of the group.
-
-This is how you would build a custom checkbox group component using the `useCheckboxGroup` composable.
-
-```vue
-<script setup lang="ts">
-import { CheckboxGroupProps, useCheckboxGroup } from '@formwerk/core';
-
-const props = defineProps<CheckboxGroupProps>();
-
-const { checkboxGroupProps, labelProps, descriptionProps, errorMessageProps, errorMessage } = useCheckboxGroup(props);
-</script>
-
-<template>
-  <div
-    v-bind="checkboxGroupProps"
-    class="flex border border-gray-200 rounded-md p-2"
-    :class="{ 'flex-col': orientation !== 'horizontal' }"
-  >
-    <span
-      v-bind="labelProps"
-      class="font-medium"
-      :class="{ 'mr-4': orientation === 'horizontal', 'mb-4': orientation !== 'horizontal' }"
-      >{{ label }}</span
-    >
-
-    <slot />
-
-    <div v-if="errorMessageProps" v-bind="errorMessageProps" class="text-red-500 text-xs">{{ errorMessage }}</div>
-
-    <div v-else-if="description" v-bind="descriptionProps" class="text-gray-500 text-xs">{{ description }}</div>
-  </div>
-</template>
-```
diff --git a/packages/core/src/useFormGroup/index.md b/packages/core/src/useFormGroup/index.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/core/src/useNumberField/index.md b/packages/core/src/useNumberField/index.md
deleted file mode 100644
index 100417c3..00000000
--- a/packages/core/src/useNumberField/index.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# useNumberField
-
-Number fields are a common field in many forms, but natively they don't provide a great user experience. Here are a few cases where the native number input falls short:
-
-- It doesn't support different numeral systems. For example Arabic numerals (٠١٢٣٤٥٦٧٨٩) are a pain to work with.
-- No formatting support, this includes grouping `,` and displaying units and currencies.
-
-This composable provides the behavior, state and accessibility implementation for number inputs along with the localization and formatting features to address these issues.
-
-## Features
-
-- Uses `input` element as a base with `type="text"` (don't worry, we use `inputmode` for accessability).
-- Labeling and descriptions are automatically linked to input and label elements.
-- Validation and error messages support either native or otherwise.
-- Formatting and parsing numbers with the `Intl.NumberFormat` API depending on the user locale.
-- Support for different numeral systems.
-- Support for `Intl.NumberFormat` units and currencies.
-- Support for the Spinbutton ARIA pattern for increment/decrement buttons.
-- Support for `min`, `max` and `step` attributes.
-- Rejects invalid input characters (non-numbers).
-- Support for `v-model` binding.
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { NumberFieldProps, useNumberField } from '@formwerk/core';
-
-const props = defineProps<NumberFieldProps>();
-
-const { inputProps, labelProps, errorMessage, errorMessageProps, incrementButtonProps, decrementButtonProps } =
-  useNumberField(props);
-</script>
-
-<template>
-  <div class="InputNumber">
-    <label v-bind="labelProps">{{ label }}</label>
-
-    <div class="flex items-stretch">
-      <button type="button" v-bind="decrementButtonProps">-</button>
-      <input v-bind="inputProps" />
-
-      <button type="button" v-bind="incrementButtonProps">+</button>
-    </div>
-
-    <span v-bind="errorMessageProps" class="error-message">
-      {{ errorMessage }}
-    </span>
-  </div>
-</template>
-```
diff --git a/packages/core/src/useRadio/index.md b/packages/core/src/useRadio/index.md
deleted file mode 100644
index db68aeaa..00000000
--- a/packages/core/src/useRadio/index.md
+++ /dev/null
@@ -1,108 +0,0 @@
-# Radio
-
-> A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one of the buttons before moving past a certain point in the workflow.
-
-Radios in HTML do not have a "group" concept, but they get grouped implicitly by the "name" attribute. This isn't the case in Vue, as they are grouped by the model name they mutate. As such, a "group" concept is introduced in this library to provide a consistent API for radio groups regardless if they are bound to the same model or if they have the same name or not.
-
-[Aria Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
-
-## Features
-
-You can build radio groups using either native HTML `input[type="radio"]` elements or custom elements. We help provide the behavior, state and accessibility implementation for both cases.
-
-- Keyboard focus management with arrow keys and tabs that respects the native behavior with RTL support.
-- Aria attributes are automatically added to the radio group and radio fields.
-- Labeling and descriptions are automatically linked to the radio fields and groups.
-
-## useRadioGroup
-
-Provides the behavior, state and accessibility implementation for group components.
-
-- A radio group can have a `v-model` bound to it.
-- A radio group considers all children that call `useRadio` as one item of the group.
-
-This is how you would build a custom radio group component using the `useRadioGroup` composable.
-
-```vue
-<script setup lang="ts">
-import { RadioGroupProps, useRadioGroup } from '@formwerk/core';
-
-const props = defineProps<RadioGroupProps>();
-
-const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, errorMessage } = useRadioGroup(props);
-</script>
-
-<template>
-  <div
-    v-bind="radioGroupProps"
-    class="flex border border-gray-200 rounded-md p-2"
-    :class="{ 'flex-col': orientation !== 'horizontal' }"
-  >
-    <span
-      v-bind="labelProps"
-      class="font-medium"
-      :class="{ 'mr-4': orientation === 'horizontal', 'mb-4': orientation !== 'horizontal' }"
-      >{{ label }}</span
-    >
-
-    <slot />
-
-    <div v-if="errorMessageProps" v-bind="errorMessageProps" class="text-red-500 text-xs">{{ errorMessage }}</div>
-
-    <div v-else-if="description" v-bind="descriptionProps" class="text-gray-500 text-xs">{{ description }}</div>
-  </div>
-</template>
-```
-
-## useRadio
-
-Provides the behavior, state and accessibility implementation for radio items. Radio items can be built with or without `input` elements depending on your styling and behavior needs.
-
-### With input elements (recommended)
-
-This is how you would build a custom radio item component using the `useRadio` composable.
-
-```vue
-<script setup lang="ts">
-import { RadioItemProps, useRadio } from '@formwerk/core';
-
-const props = defineProps<RadioItemProps>();
-
-const { labelProps, inputProps } = useRadio(props);
-</script>
-
-<template>
-  <div class="flex items-center">
-    <input v-bind="inputProps" />
-
-    <label v-bind="labelProps" class="ml-1">{{ label }}</label>
-  </div>
-</template>
-```
-
-### Without input elements
-
-For special styling needs, you don't have to use the `input` element. You will be using `radioProps` instead of `inputProps`.
-
-```vue
-<script setup lang="ts">
-import { RadioItemProps, useRadio } from '@formwerk/core';
-
-const props = defineProps<RadioItemProps>();
-
-const { labelProps, radioProps, isChecked } = useRadio(props);
-</script>
-
-<template>
-  <div class="flex items-center">
-    <div
-      v-bind="radioProps"
-      class="w-5 h-5 rounded-full flex-shrink-0 border border-gray-600 flex items-center justify-center focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-    >
-      <div class="w-3 h-3 rounded-full flex-shrink-0" :class="{ 'bg-blue-500': isChecked }" />
-    </div>
-
-    <label v-bind="labelProps" class="ml-1">{{ label }}</label>
-  </div>
-</template>
-```
diff --git a/packages/core/src/useSearchField/index.md b/packages/core/src/useSearchField/index.md
deleted file mode 100644
index 5d0c49a7..00000000
--- a/packages/core/src/useSearchField/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
-# useSearchField
-
-> input elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.
-
-Search fields have extra behaviors and use-cases that set them apart from regular text fields. This composable provides the behavior, state and accessibility implementation for search fields.
-
-A couple of behaviors set this apart from regular text fields:
-
-- They can be cleared with `Escape` keyboard key or the clear button.
-- They usually are used without a parent `form` elements and sometimes without a `submit` button. So they can be submitted with `Enter` keyboard key on their own.
-
-Some of these behaviors can be checked [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#differences_between_search_and_text_types).
-
-## Features
-
-- Uses `input[type="search"]` element as a base.
-- Labeling and descriptions are automatically linked to input and label elements.
-- Keyboard support for <kbd>Enter</kbd> key to submit the current value.
-- Keyboard support for <kbd>Escape</kbd> key to clear the current value.
-- Support for custom clear button.
-- Validation and error messages support either native or otherwise.
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { SearchFieldProps, useSearchField } from '@formwerk/core';
-
-const props = defineProps<SearchFieldProps>();
-
-const { inputProps, labelProps, fieldValue, errorMessage, errorMessageProps, clearBtnProps } = useSearchField(props);
-</script>
-
-<template>
-  <div class="InputSearch">
-    <label v-bind="labelProps">{{ label }}</label>
-
-    <input v-bind="inputProps" type="text xd" />
-
-    <span v-bind="errorMessageProps" class="error-message">
-      {{ errorMessage }}
-    </span>
-
-    <button v-show="fieldValue" v-bind="clearBtnProps" class="absolute right-4 bottom-3">❌</button>
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.InputSearch {
-  @apply relative w-full;
-  margin-bottom: calc(1em * 1.5);
-
-  label {
-    @apply block mb-1 w-full;
-  }
-
-  input {
-    @apply text-gray-800 rounded-md border-2 border-transparent py-3 px-4 w-full bg-gray-100 focus:outline-none transition-colors duration-200 focus:border-blue-500 appearance-none;
-
-    &::-webkit-search-cancel-button,
-    &::-webkit-search-decoration {
-      -webkit-appearance: none;
-    }
-  }
-  .error-message {
-    @apply absolute left-0 text-sm text-red-500;
-    bottom: calc(-1.5 * 1em);
-  }
-
-  &.has-error {
-    input {
-      @apply bg-red-100 text-red-600 focus:border-red-500;
-    }
-  }
-}
-</style>
-```
diff --git a/packages/core/src/useSlider/index.md b/packages/core/src/useSlider/index.md
deleted file mode 100644
index 79c889d6..00000000
--- a/packages/core/src/useSlider/index.md
+++ /dev/null
@@ -1,152 +0,0 @@
-# Slider
-
-> A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar, rail, or track to change the value of the slider.
-
-This composable provides the behavior, state and accessibility implementation for slider components.
-
-## Features
-
-- Labeling and descriptions for thumbs and slider elements.
-- `v-model` support for binding the value of the slider and the individual thumbs.
-- Multi-thumb support with auto value clamping.
-- Support for `min`, `max` and `step` attributes.
-- Support for both horizontal and vertical orientations.
-- Support for both LTR and RTL directions.
-- Interactive behaviors:
-  - Clicking the track element sets the value of the slider or the nearest suitable thumb to the clicked position.
-  - Dragging the thumb element changes the value of the slider.
-- Keyboard support
-  - <kbd>ArrowLeft</kbd> and <kbd>ArrowRight</kbd> keys increment and decrement the value respectively.
-  - <kbd>Home</kbd> and <kbd>End</kbd> keys set the value to the minimum and maximum values respectively.
-  - <kbd>PageUp</kbd> and <kbd>PageDown</kbd> keys increment and decrement the value by a large step respectively.
-  - Keys adapt to the direction (RTL or LTR) of the slider and the orientation of the slider (horizontal or vertical).
-
-## Usage
-
-### Thumb Component
-
-```vue
-<template>
-  <div v-bind="thumbProps" class="rounded-full bg-gray-400 focus-visible:bg-blue-500 w-4 h-4 flex-shrink-0">
-    <div
-      v-if="isDragging"
-      class="absolute -top-7 bg-blue-400 px-1.5 py-1 rounded text-xs text-white font-medium left-1/2 -translate-x-1/2"
-    >
-      {{ currentValue }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useSliderThumb, SliderThumbProps } from '@formwerk/core';
-
-const props = defineProps<SliderThumbProps>();
-
-const { thumbProps, isDragging, currentValue } = useSliderThumb(props);
-</script>
-```
-
-### Single Slider
-
-```vue
-<script setup lang="ts">
-import { useSlider, SliderProps } from '@formwerk/core';
-import Thumb from './Thumb.vue';
-
-const props = defineProps<SliderProps>();
-
-const { trackProps, groupProps, labelProps } = useSlider(props);
-</script>
-
-<template>
-  <div class="slider" v-bind="groupProps" :class="{ vertical: orientation === 'vertical' }">
-    <div v-bind="labelProps">{{ label }}</div>
-    <div v-bind="trackProps" class="track">
-      <Thumb />
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.slider {
-  width: 150px;
-
-  .track {
-    @apply w-full py-2 flex items-center;
-    &::before {
-      content: '';
-      @apply w-full bg-blue-600;
-      height: 2px;
-    }
-  }
-
-  &.vertical {
-    height: 150px;
-    width: unset;
-
-    .track {
-      @apply h-full w-8  flex-col;
-
-      &::before {
-        @apply h-full bg-blue-600;
-        width: 2px;
-        height: 100%;
-      }
-    }
-  }
-}
-</style>
-```
-
-### Multi Thumb Slider
-
-```vue
-<script setup lang="ts">
-import { useSlider, SliderProps } from '@formwerk/core';
-import Thumb from './Thumb.vue';
-
-const props = defineProps<SliderProps>();
-
-const { groupProps, trackProps, labelProps } = useSlider(props);
-</script>
-
-<template>
-  <div class="slider" v-bind="groupProps" :class="{ vertical: orientation === 'vertical' }">
-    <div v-bind="labelProps">{{ label }}</div>
-    <div v-bind="trackProps" class="track">
-      <Thumb />
-      <Thumb />
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.slider {
-  width: 150px;
-
-  .track {
-    @apply w-full py-2 flex items-center;
-    &::before {
-      content: '';
-      @apply w-full bg-blue-600;
-      height: 2px;
-    }
-  }
-
-  &.vertical {
-    height: 150px;
-    width: unset;
-
-    .track {
-      @apply h-full w-8  flex-col;
-
-      &::before {
-        @apply h-full bg-blue-600;
-        width: 2px;
-        height: 100%;
-      }
-    }
-  }
-}
-</style>
-```
diff --git a/packages/core/src/useSwitch/index.md b/packages/core/src/useSwitch/index.md
deleted file mode 100644
index 08be3efc..00000000
--- a/packages/core/src/useSwitch/index.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# useSwitch
-
-> A switch is an input widget that allows users to choose one of two values: on or off. Switches are similar to checkboxes and toggle buttons, which can also serve as binary inputs. One difference, however, is that switches can only be used for binary input.
-
-This composable provides the behavior, state and accessibility implementation for switch components.
-
-The switch field has enough unique behaviors and use-cases that justifies it having its own composable. The binary state of a switch means it shouldn't be used to represent "required" inputs where the switch needs to be "on". It is a user preference that can be turned off. This implies a few things, one of which is that the switch is not validatable.
-
-## Features
-
-- You can use `input[type="checkbox"]` element as a base or any custom element.
-- Labeling and descriptions are automatically linked to switch and label elements.
-- Keyboard support for <kbd>Space</kbd> key to toggle the current value.
-
-## Usage
-
-### With input elements (recommended)
-
-```vue
-<script setup lang="ts">
-import { useSwitch, SwitchFieldProps } from '@formwerk/core';
-
-const props = defineProps<SwitchFieldProps>();
-
-const { inputProps, labelProps, isPressed, handleClick } = useSwitch(props);
-</script>
-
-<template>
-  <div class="flex items-center">
-    <div
-      class="flex items-center p-1 w-9 rounded-full transition-colors duration-200 cursor-pointer focus-within:ring-2 ring-blue-500 ring-offset-2"
-      :class="{ 'bg-blue-500': isPressed, 'bg-gray-400': !isPressed }"
-      @click="handleClick"
-    >
-      <input v-bind="inputProps" type="checkbox" class="sr-only" />
-
-      <div
-        class="rounded-full w-3 h-3 flex-shrink-0 bg-white origin-center transition-transform duration-200"
-        :class="{ 'translate-x-4': isPressed }"
-      ></div>
-    </div>
-
-    <label class="ml-2" v-bind="labelProps">{{ label }}</label>
-  </div>
-</template>
-```
-
-### Without input elements
-
-```vue
-<script setup lang="ts">
-import { useSwitch, SwitchFieldProps } from '@formwerk/core';
-
-const props = defineProps<SwitchFieldProps>();
-
-const { switchProps, labelProps, isPressed } = useSwitch(props);
-</script>
-
-<template>
-  <div class="flex items-center">
-    <div
-      v-bind="switchProps"
-      class="flex items-center p-1 w-9 rounded-full transition-colors duration-200 cursor-pointer focus-visible:outline-none focus:ring-2 ring-blue-500 ring-offset-2"
-      :class="{ 'bg-blue-500': isPressed, 'bg-gray-400': !isPressed }"
-    >
-      <div
-        class="rounded-full w-3 h-3 flex-shrink-0 bg-white origin-center transition-transform duration-200"
-        :class="{ 'translate-x-4': isPressed }"
-      ></div>
-    </div>
-
-    <label class="ml-2" v-bind="labelProps">{{ label }}</label>
-  </div>
-</template>
-```
diff --git a/packages/core/src/useTextField/index.md b/packages/core/src/useTextField/index.md
deleted file mode 100644
index f53a806b..00000000
--- a/packages/core/src/useTextField/index.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# useTextField
-
-This composable provides the behavior, state and accessibility implementation for text input components.
-
-## Features
-
-- Uses `input` or `textarea` elements as a base.
-- Labeling and descriptions are automatically linked to input and label elements.
-- Validation and error messages support either native or otherwise.
-
-## Usage
-
-### Text Input
-
-```vue
-<script setup lang="ts">
-import { TextFieldProps, useTextField } from '@formwerk/core';
-
-const props = defineProps<TextFieldProps>();
-
-const { inputProps, labelProps, errorMessage, errorMessageProps } = useTextField(props);
-</script>
-
-<template>
-  <div class="InputText">
-    <label v-bind="labelProps">{{ label }}</label>
-
-    <input v-bind="inputProps" />
-
-    <span v-bind="errorMessageProps" class="error-message">
-      {{ errorMessage }}
-    </span>
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.InputText {
-  @apply relative w-full;
-  margin-bottom: calc(1em * 1.5);
-
-  label {
-    @apply block mb-1 w-full;
-  }
-
-  input {
-    @apply text-gray-800 rounded-md border-2 border-transparent py-3 px-4 w-full bg-gray-100 focus:outline-none transition-colors duration-200 focus:border-blue-500;
-  }
-  .error-message {
-    @apply absolute left-0 text-sm text-red-500;
-    bottom: calc(-1.5 * 1em);
-  }
-
-  &.has-error {
-    input {
-      @apply bg-red-100 text-red-600 focus:border-red-500;
-    }
-  }
-}
-</style>
-```
-
-### Textarea
-
-```vue
-<script setup lang="ts">
-import { TextFieldProps, useTextField } from '@formwerk/core';
-
-const props = defineProps<TextFieldProps>();
-
-const { inputProps, labelProps, errorMessage, errorMessageProps } = useTextField(props);
-</script>
-
-<template>
-  <div class="InputTextArea">
-    <label v-bind="labelProps">{{ label }}</label>
-
-    <textarea v-bind="inputProps" />
-
-    <span v-bind="errorMessageProps" class="error-message">
-      {{ errorMessage }}
-    </span>
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.InputTextArea {
-  @apply relative w-full;
-  margin-bottom: calc(1em * 1.5);
-
-  label {
-    @apply block mb-1 w-full;
-  }
-
-  textarea {
-    @apply text-gray-800 rounded-md border-2 border-transparent py-3 px-4 w-full bg-gray-100 focus:outline-none transition-colors duration-200 focus:border-blue-500;
-  }
-  .error-message {
-    @apply absolute left-0 text-sm text-red-500;
-    bottom: calc(-1.5 * 1em);
-  }
-
-  &.has-error {
-    textarea {
-      @apply bg-red-100 text-red-600 focus:border-red-500;
-    }
-  }
-}
-</style>
-```