diff --git a/bun.lockb b/bun.lockb
index c3f147f0f6..d6fa64fde5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox-context.svelte b/packages/svelte/src/lib/components/checkbox/checkbox-context.svelte
new file mode 100644
index 0000000000..1fd2ba05d8
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox-context.svelte
@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseCheckboxContext } from './use-checkbox-context'
+
+  export interface CheckboxContextProps {
+    api?: Snippet<[UseCheckboxContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useCheckboxContext } from './use-checkbox-context'
+
+  const { api }: CheckboxContextProps = $props()
+  const checkbox = useCheckboxContext()
+</script>
+
+{@render api?.(checkbox)}
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox-control.svelte b/packages/svelte/src/lib/components/checkbox/checkbox-control.svelte
new file mode 100644
index 0000000000..583ae4e8dd
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox-control.svelte
@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps } from '$lib/types'
+
+  export interface CheckboxControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface CheckboxControlProps extends HTMLProps<'div'>, CheckboxControlBaseProps {}
+</script>
+
+<script lang="ts">
+  import { useCheckboxContext } from './use-checkbox-context'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+
+  const props: CheckboxControlProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const mergedProps = $derived(mergeProps(checkbox().getControlProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox-hidden-input.svelte b/packages/svelte/src/lib/components/checkbox/checkbox-hidden-input.svelte
new file mode 100644
index 0000000000..d6b4532daa
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox-hidden-input.svelte
@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps } from '$lib/types'
+
+  export interface CheckboxHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface CheckboxHiddenInputProps
+    extends HTMLProps<'input'>,
+      CheckboxHiddenInputBaseProps {}
+</script>
+
+<script lang="ts">
+  import { useCheckboxContext } from './use-checkbox-context'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+
+  // TODO: use Field component
+  const props: CheckboxHiddenInputProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const mergedProps = $derived(mergeProps(checkbox().getHiddenInputProps(), props))
+</script>
+
+<Ark as="input" {...mergedProps} />
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox-indicator.svelte b/packages/svelte/src/lib/components/checkbox/checkbox-indicator.svelte
new file mode 100644
index 0000000000..a3465d3dd4
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox-indicator.svelte
@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps } from '$lib/types'
+
+  interface IndicatorProps {
+    indeterminate?: boolean
+  }
+
+  export interface CheckboxIndicatorBaseProps extends IndicatorProps, PolymorphicProps<'div'> {}
+  export interface CheckboxIndicatorProps extends HTMLProps<'div'>, CheckboxIndicatorBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCheckboxContext } from './use-checkbox-context'
+
+  const { indeterminate, ...rest }: CheckboxIndicatorProps = $props()
+  // const props: CheckboxIndicatorProps = $props()
+  $inspect('props', indeterminate)
+  const checkbox = useCheckboxContext()
+  $inspect('checkbox', checkbox())
+  const isVisible = $derived(indeterminate ? checkbox().indeterminate : checkbox().checked)
+  // const isVisible = $derived(props.indeterminate ? checkbox().indeterminate : checkbox().checked)
+  // const isVisible = $derived(checkbox().checked)
+  $inspect('isVisible', isVisible)
+  const mergedProps = $derived(mergeProps(checkbox().getIndicatorProps(), rest))
+  // const mergedProps = $derived(mergeProps(checkbox().getIndicatorProps(), props))
+  console.log('--------------')
+</script>
+
+<Ark as="div" {...mergedProps} hidden={!isVisible} />
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox-label.svelte b/packages/svelte/src/lib/components/checkbox/checkbox-label.svelte
new file mode 100644
index 0000000000..ae85c58991
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox-label.svelte
@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps } from '$lib/types'
+
+  export interface CheckboxLabelBaseProps extends PolymorphicProps<'span'> {}
+  export interface CheckboxLabelProps extends HTMLProps<'span'>, CheckboxLabelBaseProps {}
+</script>
+
+<script lang="ts">
+  import { useCheckboxContext } from './use-checkbox-context'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+
+  const props: CheckboxLabelProps = $props()
+
+  const checkbox = useCheckboxContext()
+  const mergedProps = $derived(mergeProps(checkbox().getLabelProps(), props))
+</script>
+
+<Ark as="span" {...mergedProps} />
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox-root-provider.svelte b/packages/svelte/src/lib/components/checkbox/checkbox-root-provider.svelte
new file mode 100644
index 0000000000..87bffb6d49
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox-root-provider.svelte
@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps } from '$lib/types'
+  import type { UseCheckboxReturn } from './use-checkbox.svelte'
+
+  interface RootProviderProps {
+    value: UseCheckboxReturn
+  }
+
+  export interface CheckboxRootProviderBaseProps extends RootProviderProps {}
+  export interface CheckboxRootProviderProps
+    extends Assign<HTMLProps<'div'>, CheckboxRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { CheckboxProvider } from './use-checkbox-context'
+
+  const props: CheckboxRootProviderProps = $props()
+  const { value: checkbox, ...localProps } = props
+  const mergedProps = $derived(mergeProps(checkbox().getRootProps(), localProps))
+
+  CheckboxProvider(checkbox)
+</script>
+
+<Ark as="div" {...mergedProps} />
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox-root.svelte b/packages/svelte/src/lib/components/checkbox/checkbox-root.svelte
new file mode 100644
index 0000000000..f8f9ec97b1
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox-root.svelte
@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '$lib/types'
+  import type { UseCheckboxProps } from './use-checkbox.svelte'
+
+  export interface CheckboxRootBaseProps extends UseCheckboxProps, PolymorphicProps<'label'> {}
+  export interface CheckboxRootProps extends Assign<HTMLProps<'label'>, CheckboxRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps, reflect } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { CheckboxProvider } from './use-checkbox-context'
+  import { useCheckbox } from './use-checkbox.svelte'
+
+  const props: CheckboxRootProps = $props()
+  const [useCheckboxProps, localProps] = $derived(
+    createSplitProps<UseCheckboxProps>()(props, [
+      'checked',
+      'defaultChecked',
+      'disabled',
+      'form',
+      'id',
+      'ids',
+      'invalid',
+      'name',
+      'onCheckedChange',
+      'readOnly',
+      'required',
+      'value',
+    ]),
+  )
+
+  const checkbox = useCheckbox(reflect(() => useCheckboxProps))
+  const mergedProps = $derived(mergeProps(checkbox().getRootProps(), localProps))
+
+  CheckboxProvider(checkbox)
+</script>
+
+<Ark as="label" {...mergedProps} />
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox.anatomy.ts b/packages/svelte/src/lib/components/checkbox/checkbox.anatomy.ts
new file mode 100644
index 0000000000..31fad8ec97
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox.anatomy.ts
@@ -0,0 +1,3 @@
+import { anatomy } from '@zag-js/checkbox'
+
+export const checkboxAnatomy = anatomy.extendWith('group')
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox.stories.ts b/packages/svelte/src/lib/components/checkbox/checkbox.stories.ts
new file mode 100644
index 0000000000..c70ce022f2
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox.stories.ts
@@ -0,0 +1,53 @@
+import type { Meta } from '@storybook/svelte'
+import BasicExample from './examples/basic.svelte'
+import ContextExample from './examples/context.svelte'
+import IndeterminateExample from './examples/indeterminate.svelte'
+import RootProviderExample from './examples/root-provider.svelte'
+
+const meta = {
+  title: 'Components / Checkbox',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    Component: BasicExample,
+  }),
+}
+
+export const Indeterminate = {
+  render: () => ({
+    Component: IndeterminateExample,
+  }),
+}
+
+// export const RenderProp = {
+//   render: () => ({
+//     Component: RenderPropExample,
+//   }),
+// }
+
+// export const Group = {
+//   render: () => ({
+//     Component: GroupExample,
+//   }),
+// }
+
+// export const WithField = {
+//   render: () => ({
+//     Component: WithFieldExample,
+//   }),
+// }
+
+export const RootProvider = {
+  render: () => ({
+    Component: RootProviderExample,
+  }),
+}
+
+export const Context = {
+  render: () => ({
+    Component: ContextExample,
+  }),
+}
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox.test.ts b/packages/svelte/src/lib/components/checkbox/checkbox.test.ts
new file mode 100644
index 0000000000..ea1de8f2ae
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox.test.ts
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+import ComponentUnderTest from './examples/basic.svelte'
+
+describe('Checkbox', async () => {
+  it('should render', async () => {
+    render(ComponentUnderTest)
+    expect(screen.getByText('Checkbox')).toBeInTheDocument()
+  })
+})
diff --git a/packages/svelte/src/lib/components/checkbox/checkbox.ts b/packages/svelte/src/lib/components/checkbox/checkbox.ts
new file mode 100644
index 0000000000..704bcb9168
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/checkbox.ts
@@ -0,0 +1,35 @@
+export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox'
+export {
+  default as Context,
+  type CheckboxContextProps as ContextProps,
+} from './checkbox-context.svelte'
+export {
+  default as Control,
+  type CheckboxControlBaseProps as ControlBaseProps,
+  type CheckboxControlProps as ControlProps,
+} from './checkbox-control.svelte'
+export {
+  default as HiddenInput,
+  type CheckboxHiddenInputBaseProps as HiddenInputBaseProps,
+  type CheckboxHiddenInputProps as HiddenInputProps,
+} from './checkbox-hidden-input.svelte'
+export {
+  default as Indicator,
+  type CheckboxIndicatorBaseProps as IndicatorBaseProps,
+  type CheckboxIndicatorProps as IndicatorProps,
+} from './checkbox-indicator.svelte'
+export {
+  default as Label,
+  type CheckboxLabelBaseProps as LabelBaseProps,
+  type CheckboxLabelProps as LabelProps,
+} from './checkbox-label.svelte'
+export {
+  default as RootProvider,
+  type CheckboxRootProviderBaseProps as RootProviderBaseProps,
+  type CheckboxRootProviderProps as RootProviderProps,
+} from './checkbox-root-provider.svelte'
+export {
+  default as Root,
+  type CheckboxRootBaseProps as RootBaseProps,
+  type CheckboxRootProps as RootProps,
+} from './checkbox-root.svelte'
diff --git a/packages/svelte/src/lib/components/checkbox/examples/basic.svelte b/packages/svelte/src/lib/components/checkbox/examples/basic.svelte
new file mode 100644
index 0000000000..b35238babc
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/examples/basic.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Checkbox } from '..'
+  import type { RootProps } from '../checkbox'
+  import CheckIcon from './check-icon.svelte'
+
+  const props: RootProps = $props()
+</script>
+
+<Checkbox.Root {...props}>
+  <Checkbox.Label>Checkbox</Checkbox.Label>
+  <Checkbox.Control>
+    <Checkbox.Indicator>
+      <CheckIcon />
+    </Checkbox.Indicator>
+  </Checkbox.Control>
+  <Checkbox.HiddenInput />
+</Checkbox.Root>
diff --git a/packages/svelte/src/lib/components/checkbox/examples/check-icon.svelte b/packages/svelte/src/lib/components/checkbox/examples/check-icon.svelte
new file mode 100644
index 0000000000..f4fb2e94e9
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/examples/check-icon.svelte
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-check"
+>
+  <title>Check Icon</title>
+  <path d="M20 6 9 17l-5-5" />
+</svg>
diff --git a/packages/svelte/src/lib/components/checkbox/examples/context.svelte b/packages/svelte/src/lib/components/checkbox/examples/context.svelte
new file mode 100644
index 0000000000..ec05c8a9f7
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/examples/context.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Checkbox } from '..'
+  import CheckIcon from './check-icon.svelte'
+</script>
+
+<Checkbox.Root>
+  <Checkbox.Context>
+    {#snippet api(checkbox)}
+      <Checkbox.Label>Checkbox {checkbox().checked.toString()}</Checkbox.Label>
+    {/snippet}
+  </Checkbox.Context>
+  <Checkbox.Control>
+    <Checkbox.Indicator>
+      <CheckIcon />
+    </Checkbox.Indicator>
+  </Checkbox.Control>
+  <Checkbox.HiddenInput />
+</Checkbox.Root>
diff --git a/packages/svelte/src/lib/components/checkbox/examples/indeterminate.svelte b/packages/svelte/src/lib/components/checkbox/examples/indeterminate.svelte
new file mode 100644
index 0000000000..821c7a4456
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/examples/indeterminate.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Checkbox } from '@ark-ui/svelte/checkbox'
+  import CheckIcon from './check-icon.svelte'
+  import MinusIcon from './minus-icon.svelte'
+</script>
+
+<Checkbox.Root checked="indeterminate">
+  <Checkbox.Label>Checkbox</Checkbox.Label>
+  <Checkbox.Control>
+    <Checkbox.Indicator>
+      <CheckIcon />
+    </Checkbox.Indicator>
+    <Checkbox.Indicator indeterminate>
+      <MinusIcon />
+    </Checkbox.Indicator>
+  </Checkbox.Control>
+  <Checkbox.HiddenInput />
+</Checkbox.Root>
diff --git a/packages/svelte/src/lib/components/checkbox/examples/minus-icon.svelte b/packages/svelte/src/lib/components/checkbox/examples/minus-icon.svelte
new file mode 100644
index 0000000000..d24fd84741
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/examples/minus-icon.svelte
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-minus"
+>
+  <title>Minus Icon</title>
+  <path d="M5 12h14" />
+</svg>
diff --git a/packages/svelte/src/lib/components/checkbox/examples/root-provider.svelte b/packages/svelte/src/lib/components/checkbox/examples/root-provider.svelte
new file mode 100644
index 0000000000..2b0a05d668
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/examples/root-provider.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Checkbox, useCheckbox } from '..'
+  import CheckIcon from './check-icon.svelte'
+
+  const checkbox = useCheckbox({
+    onCheckedChange: (details) => {
+      console.log('checked', details.checked)
+    },
+  })
+</script>
+
+<button onclick={() => checkbox().toggleChecked()}>Toggle Checkbox</button>
+
+<Checkbox.RootProvider value={checkbox}>
+  <Checkbox.Label>Checkbox</Checkbox.Label>
+  <Checkbox.Control>
+    <Checkbox.Indicator>
+      <CheckIcon />
+    </Checkbox.Indicator>
+  </Checkbox.Control>
+  <Checkbox.HiddenInput />
+</Checkbox.RootProvider>
diff --git a/packages/svelte/src/lib/components/checkbox/index.ts b/packages/svelte/src/lib/components/checkbox/index.ts
new file mode 100644
index 0000000000..4e527a509c
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/index.ts
@@ -0,0 +1,47 @@
+export type {
+  CheckedChangeDetails as CheckboxCheckedChangeDetails,
+  CheckedState as CheckboxCheckedState,
+} from '@zag-js/checkbox'
+export { default as CheckboxContext } from './checkbox-context.svelte'
+export {
+  default as CheckboxControl,
+  type CheckboxControlBaseProps,
+  type CheckboxControlProps,
+} from './checkbox-control.svelte'
+export {
+  default as CheckboxHiddenInput,
+  type CheckboxHiddenInputBaseProps,
+  type CheckboxHiddenInputProps,
+} from './checkbox-hidden-input.svelte'
+export {
+  default as CheckboxIndicator,
+  type CheckboxIndicatorBaseProps,
+  type CheckboxIndicatorProps,
+} from './checkbox-indicator.svelte'
+export {
+  default as CheckboxLabel,
+  type CheckboxLabelBaseProps,
+  type CheckboxLabelProps,
+} from './checkbox-label.svelte'
+export {
+  default as CheckboxRootProvider,
+  type CheckboxRootProviderBaseProps,
+  type CheckboxRootProviderProps,
+} from './checkbox-root-provider.svelte'
+export {
+  default as CheckboxRoot,
+  type CheckboxRootBaseProps,
+  type CheckboxRootProps,
+} from './checkbox-root.svelte'
+export { checkboxAnatomy } from './checkbox.anatomy'
+export {
+  useCheckboxContext,
+  type UseCheckboxContext,
+} from './use-checkbox-context'
+export {
+  useCheckbox,
+  type UseCheckboxProps,
+  type UseCheckboxReturn,
+} from './use-checkbox.svelte'
+
+export * as Checkbox from './checkbox'
diff --git a/packages/svelte/src/lib/components/checkbox/use-checkbox-context.ts b/packages/svelte/src/lib/components/checkbox/use-checkbox-context.ts
new file mode 100644
index 0000000000..dab589472e
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/use-checkbox-context.ts
@@ -0,0 +1,7 @@
+import { createContext } from '$lib/utils/create-context'
+import type { UseCheckboxReturn } from './use-checkbox.svelte'
+
+export interface UseCheckboxContext extends UseCheckboxReturn {}
+export const [CheckboxProvider, useCheckboxContext] = createContext<UseCheckboxContext>({
+  key: 'CheckboxContext',
+})
diff --git a/packages/svelte/src/lib/components/checkbox/use-checkbox.svelte.ts b/packages/svelte/src/lib/components/checkbox/use-checkbox.svelte.ts
new file mode 100644
index 0000000000..1031f24a44
--- /dev/null
+++ b/packages/svelte/src/lib/components/checkbox/use-checkbox.svelte.ts
@@ -0,0 +1,39 @@
+import { useEnvironmentContext } from '$lib/providers/environment'
+import { useLocaleContext } from '$lib/providers/locale'
+import type { Accessor, Optional } from '$lib/types'
+import { createId } from '$lib/utils/create-id'
+import * as checkbox from '@zag-js/checkbox'
+import { type PropTypes, normalizeProps, useMachine } from '@zag-js/svelte'
+
+export interface UseCheckboxProps
+  extends Optional<Omit<checkbox.Context, 'dir' | 'getRootNode'>, 'id'> {
+  /**
+   * The checked value of the slider when it is first rendered.
+   * Use when you do not need to control the state of the checkbox.
+   */
+  defaultChecked?: checkbox.Context['checked']
+}
+export interface UseCheckboxReturn extends Accessor<checkbox.Api<PropTypes>> {}
+
+export const useCheckbox = (props: UseCheckboxProps = {}) => {
+  const id = createId()
+  const env = useEnvironmentContext()
+  const locale = useLocaleContext()
+
+  const initialContext: checkbox.Context = $derived({
+    id,
+    dir: locale.dir,
+    getRootNode: env.getRootNode,
+    checked: props.defaultChecked,
+    ...props,
+  })
+
+  const context: checkbox.Context = $derived({
+    ...initialContext,
+    checked: props.checked,
+  })
+
+  const [state, send] = useMachine(checkbox.machine(initialContext), { context })
+  const api = $derived(() => checkbox.connect(state, send, normalizeProps))
+  return api
+}
diff --git a/packages/svelte/src/lib/components/index.ts b/packages/svelte/src/lib/components/index.ts
index 3b1f5dfb26..f1145d089b 100644
--- a/packages/svelte/src/lib/components/index.ts
+++ b/packages/svelte/src/lib/components/index.ts
@@ -1,4 +1,5 @@
 export * from './avatar'
+export * from './checkbox'
 export * from './factory'
 export * from './format'
 export * from './frame'