diff --git a/README.md b/README.md
index 69bca88..3cc9a0d 100644
--- a/README.md
+++ b/README.md
@@ -140,14 +140,29 @@ import {Button, Avatar} from "@offload-project/hallogen";
 
 Higher-level, Inertia-aware building blocks:
 
-`form-section` · `header` · `resource-clear-filters` · `resource-table` · `breadcrumb-items-render` ·
-`menu-items-render` · `navbar-items-render` · `pagination-render` · `sidebar-items-render` · `svg-html-render`
+`form-section` · `header-package` · `resource-clear-filters` · `resource-filters` · `resource-table` ·
+`breadcrumb-items-render` · `menu-items-render` · `navbar-items-render` · `pagination-render` ·
+`sidebar-items-render` · `svg-html-render`
 
 ### Shared style presets
 
-`tailwind-variants` style definitions shared across components, importable for building custom variants:
+[`tailwind-variants`](https://www.tailwind-variants.org/) style definitions shared across components,
+importable for building your own variants. Available from the barrel or the `shared/<name>` subpath:
 
-`shared/badge-styles` · `shared/button-styles` · `shared/field-styles` · `shared/toggle-styles`
+| Module                 | Exports                                                               |
+|------------------------|-----------------------------------------------------------------------|
+| `shared/badge-styles`  | `badgeStyles`                                                         |
+| `shared/button-styles` | `buttonStyles`                                                        |
+| `shared/field-styles`  | `labelStyles`, `descriptionStyles`, `fieldErrorStyles`, `fieldStyles` |
+| `shared/toggle-styles` | `toggleStyles`                                                        |
+
+```tsx
+import {buttonStyles} from "@offload-project/hallogen/shared/button-styles";
+// or from the barrel: import { buttonStyles } from "@offload-project/hallogen";
+
+// reuse the button's variants on a custom element
+<a className={buttonStyles({variant: "primary", size: "sm"})}>Link button</a>;
+```
 
 ## Hooks
 
diff --git a/package.json b/package.json
index 9501307..4134a7a 100644
--- a/package.json
+++ b/package.json
@@ -502,6 +502,10 @@
       "types": "./dist/components/composite/resource-clear-filters.d.ts",
       "import": "./dist/components/composite/resource-clear-filters.js"
     },
+    "./resource-filters": {
+      "types": "./dist/components/composite/resource-filters.d.ts",
+      "import": "./dist/components/composite/resource-filters.js"
+    },
     "./resource-table": {
       "types": "./dist/components/composite/resource-table.d.ts",
       "import": "./dist/components/composite/resource-table.js"
diff --git a/src/components/composite/resource-filters.tsx b/src/components/composite/resource-filters.tsx
new file mode 100644
index 0000000..8af763c
--- /dev/null
+++ b/src/components/composite/resource-filters.tsx
@@ -0,0 +1,56 @@
+import { SearchField, SearchInput } from "@offload-project/hallogen/search-field";
+import { Toolbar, ToolbarLeft, ToolbarRight } from "@offload-project/hallogen/toolbar";
+import type { ReactNode, SubmitEvent } from "react";
+import type { Key } from "react-aria-components";
+import { ResourceClearFilters } from "@/components/composite/resource-clear-filters";
+import { TableColumnMenu } from "@/components/ui/table.tsx";
+import type { ColumnDef } from "@/types";
+
+interface Props {
+  searchLabel: string;
+  searchPlaceholder: string;
+  searchDefaultValue: string | null;
+  onSearchSubmit: (event: SubmitEvent<HTMLFormElement>) => void;
+  /** Toggleable columns for the column-visibility menu. */
+  columns: ColumnDef[];
+  visible: Set<Key>;
+  onColumnsChange: (visible: Set<Key>) => void;
+  /** Current filter state, used to decide whether to show "Clear filters". */
+  filters: object;
+  clearUrl: string;
+  /** Optional filter dropdown(s) rendered between search and the column menu. */
+  children?: ReactNode;
+}
+
+/**
+ * The standard admin index filter bar: a search field, an optional filter
+ * dropdown slot, the column-visibility menu, and a clear-filters link.
+ */
+export function ResourceFilters({
+  searchLabel,
+  searchPlaceholder,
+  searchDefaultValue,
+  onSearchSubmit,
+  columns,
+  visible,
+  onColumnsChange,
+  filters,
+  clearUrl,
+  children,
+}: Props) {
+  return (
+    <Toolbar className="-mx-(--container-padding)">
+      <ToolbarLeft />
+      <ToolbarRight>
+        <form onSubmit={onSearchSubmit}>
+          <SearchField aria-label={searchLabel} defaultValue={searchDefaultValue ?? ""}>
+            <SearchInput placeholder={searchPlaceholder} />
+          </SearchField>
+        </form>
+        {children}
+        <TableColumnMenu columns={columns} visible={visible} onChange={onColumnsChange} />
+        <ResourceClearFilters filters={filters} url={clearUrl} />
+      </ToolbarRight>
+    </Toolbar>
+  );
+}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 3ee7a6f..74f3417 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,4 +1,5 @@
 import { CheckIcon, MinusIcon } from "lucide-react";
+import type { ComponentProps } from "react";
 import {
   CheckboxButton,
   type CheckboxButtonProps,
@@ -17,69 +18,89 @@ export function CheckboxGroup({ className, ...props }: CheckboxGroupProps) {
       {...props}
       data-slot="control"
       className={cx(
-        "space-y-3 has-[[slot=description]]:not-has-[[slot=errorMessage]]:space-y-6 has-[[slot=description]]:**:data-[slot=label]:font-medium **:[[slot=description]]:block",
+        "space-y-3 has-[[slot=description]]:space-y-6 has-[[slot=description]]:**:data-[slot=label]:font-medium **:[[slot=description]]:block",
         className,
       )}
     />
   );
 }
 
+/** The field wrapper that owns the checkbox's form input and state. Compose with `CheckboxControl`. */
 export function CheckboxField({ className, ...props }: CheckboxFieldProps) {
   return (
     <CheckboxFieldPrimitive
-      data-slot="control"
       {...props}
-      className={cx(
-        "grid grid-cols-[1.125rem_1fr] gap-x-3 gap-y-1 sm:grid-cols-[1rem_1fr]",
-        "*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1",
-        "*:[[slot=errorMessage]]:col-span-full",
-        "**:data-[slot=control-label]:col-start-2 **:data-[slot=control-label]:row-start-1",
-        "*:[[slot=description]]:col-start-2 *:[[slot=description]]:row-start-2",
-        "has-[[slot=description]]:**:data-[slot=control-label]:font-medium",
-        className,
-      )}
+      data-slot="control"
+      className={cx("has-[[slot=description]]:**:data-[slot=label]:font-medium", className)}
     />
   );
 }
 
-export function Checkbox({ className, ...props }: CheckboxButtonProps) {
+/** The clickable area of a checkbox (indicator + label). Must be rendered inside a `CheckboxField`. */
+export function CheckboxControl({ className, children, ...props }: CheckboxButtonProps) {
   return (
     <CheckboxButton
-      className={cx("group col-span-full inline-flex gap-x-3 focus:outline-hidden", className)}
+      className={cx(
+        "group block [--indicator-mt:--spacing(0.75)] disabled:opacity-50 sm:[--indicator-mt:--spacing(1)]",
+        className,
+      )}
       {...props}>
-      {composeRenderProps(props.children, (children, { isSelected, isIndeterminate, isInvalid }) => {
+      {composeRenderProps(children, (children, { isSelected, isIndeterminate, isFocusVisible, isInvalid }) => {
+        const isStringChild = typeof children === "string";
         const indicator = isIndeterminate ? (
           <MinusIcon data-slot="check-indicator" />
         ) : isSelected ? (
           <CheckIcon data-slot="check-indicator" />
         ) : null;
 
+        const content = isStringChild ? <CheckboxLabel>{children}</CheckboxLabel> : children;
+
         return (
           <div
             className={twMerge(
-              "grid grid-cols-[1.125rem_1fr] items-center gap-y-1 has-data-[slot=control-label]:gap-x-3 sm:grid-cols-[1rem_1fr]",
+              "grid grid-cols-[1.125rem_1fr] gap-y-1 has-data-[slot=label]:gap-x-3 sm:grid-cols-[1rem_1fr]",
+              "*:data-[slot=indicator]:col-start-1 *:data-[slot=indicator]:row-start-1 *:data-[slot=indicator]:mt-(--indicator-mt)",
+              "*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1",
+              "*:[[slot=description]]:col-start-2 *:[[slot=description]]:row-start-2",
+              "has-[[slot=description]]:**:data-[slot=label]:font-medium",
             )}>
             <span
               data-slot="indicator"
               className={twMerge([
-                "relative inset-ring inset-ring-input isolate col-start-1 row-start-1 flex shrink-0 items-center justify-center rounded bg-(--control-bg,transparent) text-bg transition group-hover:inset-ring-muted-fg/30 group-focus-visible:inset-ring-ring",
-                "size-4.5 *:data-[slot=check-indicator]:size-4 sm:size-4 sm:*:data-[slot=check-indicator]:size-3.5",
+                "relative inset-ring inset-ring-input isolate flex shrink-0 items-center justify-center rounded bg-(--control-bg,transparent) text-bg transition group-hover:inset-ring-muted-fg/30",
+                "sm:size-4 sm:*:data-[slot=check-indicator]:size-3.5",
+                "size-4.5 *:data-[slot=check-indicator]:size-4",
                 "in-disabled:bg-muted",
                 (isSelected || isIndeterminate) && [
                   "inset-ring-(--checkbox-ring,var(--color-ring)) bg-(--checkbox-bg,var(--color-primary)) text-(--checkbox-fg,var(--color-primary-fg))",
                   "group-invalid:inset-ring/70 group-invalid:bg-danger group-invalid:text-danger-fg dark:group-invalid:inset-ring-danger-subtle-fg/70",
                 ],
+                isFocusVisible && [
+                  "inset-ring-(--checkbox-ring,var(--color-ring)) ring-(--checkbox-ring,var(--color-ring))/20 ring-3",
+                  "group-invalid:inset-ring-danger-subtle-fg/70 group-invalid:text-danger-fg group-invalid:ring-danger-subtle-fg/20",
+                ],
                 isInvalid &&
                   "inset-ring-danger-subtle-fg/70 bg-danger-subtle/5 text-danger-fg ring-danger-subtle-fg/20 group-hover:inset-ring-danger-subtle-fg/70",
               ])}>
               {indicator}
             </span>
-            <Label className="col-start-2 row-start-1" data-slot="control-label" elementType="span">
-              {children}
-            </Label>
+            {content}
           </div>
         );
       })}
     </CheckboxButton>
   );
 }
+
+/** A self-contained checkbox: a `CheckboxField` (owns the input) wrapping a `CheckboxControl`. */
+export function Checkbox({ children, className, ...props }: CheckboxFieldProps) {
+  return (
+    <CheckboxField {...props}>
+      <CheckboxControl className={className}>{children}</CheckboxControl>
+    </CheckboxField>
+  );
+}
+
+export function CheckboxLabel(props: ComponentProps<typeof Label>) {
+  return <Label elementType="span" data-slot="control-label" {...props} />;
+}
diff --git a/src/components/ui/choice-box.tsx b/src/components/ui/choice-box.tsx
index b711639..a91f52b 100644
--- a/src/components/ui/choice-box.tsx
+++ b/src/components/ui/choice-box.tsx
@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 import type { VariantProps } from "tailwind-variants";
 import { tv } from "tailwind-variants";
 import { cx } from "@/lib/primitive";
-import { Checkbox, CheckboxField } from "./checkbox";
+import { Checkbox } from "./checkbox";
 
 const choiceBoxStyles = tv({
   base: "grid [--gutter:--spacing(4)]",
@@ -166,11 +166,10 @@ const ChoiceBoxItem = ({ className, label, description, children, ...props }: Ch
           <>
             {content}
             {selectionMode === "multiple" && (
-              <CheckboxField
+              <Checkbox
+                className="col-start-2 self-start group-has-[svg:not([data-slot=check-indicator])]:col-start-3 group-has-data-[slot=avatar]:col-start-3"
                 slot="selection"
-                className="col-start-2 gap-x-0 self-start group-has-[svg:not([data-slot=check-indicator])]:col-start-3 group-has-data-[slot=avatar]:col-start-3">
-                <Checkbox className="col-span-1" />
-              </CheckboxField>
+              />
             )}
           </>
         );
diff --git a/src/components/ui/grid-list.tsx b/src/components/ui/grid-list.tsx
index 9406fd6..1e0cdfd 100644
--- a/src/components/ui/grid-list.tsx
+++ b/src/components/ui/grid-list.tsx
@@ -11,7 +11,7 @@ import {
 import { Text, type TextProps } from "react-aria-components/Text";
 import { twMerge } from "tailwind-merge";
 import { cx } from "@/lib/primitive";
-import { Checkbox, CheckboxField } from "./checkbox";
+import { Checkbox } from "./checkbox";
 
 const GridList = <T extends object>({ className, ...props }: GridListProps<T>) => (
   <GridListPrimitive
@@ -67,9 +67,7 @@ const GridListItem = ({ className, children, ...props }: GridListItemProps) => {
           )}
 
           {values.selectionMode === "multiple" && values.selectionBehavior === "toggle" && (
-            <CheckboxField className="gap-x-0" slot="selection">
-              <Checkbox className="col-span-1" />
-            </CheckboxField>
+            <Checkbox className="[--indicator-mt:0] *:gap-x-0 sm:[--indicator-mt:0]" slot="selection" />
           )}
           {typeof children === "function" ? children(values) : children}
         </>
diff --git a/src/components/ui/radio.tsx b/src/components/ui/radio.tsx
index 4eafa80..1a315d7 100644
--- a/src/components/ui/radio.tsx
+++ b/src/components/ui/radio.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from "react";
 import { composeRenderProps } from "react-aria-components/composeRenderProps";
 import {
   RadioButton,
@@ -17,58 +18,70 @@ export function RadioGroup({ className, ...props }: RadioGroupProps) {
       {...props}
       data-slot="control"
       className={cx(
-        "space-y-3 has-[[slot=description]]:not-has-[[slot=errorMessage]]:space-y-6 *:data-[slot=label]:font-medium",
+        "space-y-3 **:data-[slot=label]:font-normal",
+        "has-[slot=description]:space-y-6 has-[[slot=description]]:**:data-[slot=label]:font-medium",
         className,
       )}
     />
   );
 }
 
+/** The field wrapper that owns a radio option's value and input. Compose with `RadioControl`. */
 export function RadioField({ className, ...props }: RadioFieldProps) {
-  return (
-    <RadioFieldPrimitive
-      {...props}
-      className={cx(
-        "grid grid-cols-[1.125rem_1fr] gap-x-3 gap-y-1 sm:grid-cols-[1rem_1fr]",
-        "*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1",
-        "**:data-[slot=control-label]:col-start-2 **:data-[slot=control-label]:row-start-1",
-        "*:[[slot=description]]:col-start-2 *:[[slot=description]]:row-start-2",
-        "has-[[slot=description]]:**:data-[slot=control-label]:font-medium",
-        className,
-      )}
-      data-slot="control"
-    />
-  );
+  return <RadioFieldPrimitive {...props} data-slot="control" className={cx("group block", className)} />;
 }
 
-export function Radio({ className, children, ...props }: RadioButtonProps) {
+/** The clickable area of a radio (indicator + label). Must be rendered inside a `RadioField`. */
+export function RadioControl({ className, children, ...props }: RadioButtonProps) {
   return (
-    <RadioButton
-      data-slot="control"
-      className={cx("group col-span-full inline-flex gap-x-3 focus:outline-hidden", className)}
-      {...props}>
-      {composeRenderProps(children, (children, { isSelected, isInvalid }) => {
+    <RadioButton className={cx("group block disabled:opacity-50", className)} {...props}>
+      {composeRenderProps(children, (children, { isSelected, isFocusVisible, isInvalid }) => {
+        const isStringChild = typeof children === "string";
+        const content = isStringChild ? <RadioLabel>{children}</RadioLabel> : children;
+
         return (
-          <>
+          <div
+            className={twMerge(
+              "grid grid-cols-[1.125rem_1fr] gap-x-3 gap-y-1 sm:grid-cols-[1rem_1fr]",
+              "*:data-[slot=indicator]:col-start-1 *:data-[slot=indicator]:row-start-1 *:data-[slot=indicator]:mt-0.75 sm:*:data-[slot=indicator]:mt-1",
+              "*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1",
+              "*:[[slot=description]]:col-start-2 *:[[slot=description]]:row-start-2",
+              "has-[[slot=description]]:**:data-[slot=label]:font-medium",
+            )}>
             <span
               data-slot="indicator"
               className={twMerge([
-                "relative inset-ring inset-ring-input isolate col-start-1 row-start-1 mt-0.75 flex size-4.5 shrink-0 items-center justify-center rounded-full bg-(--control-bg,transparent) text-bg transition before:absolute before:inset-auto before:size-2 before:shrink-0 before:rounded-full before:content-[''] hover:before:bg-muted-fg/20 sm:mt-1 sm:size-4 sm:before:size-1.7",
+                "relative inset-ring inset-ring-input isolate flex size-4.5 shrink-0 items-center justify-center rounded-full bg-(--control-bg,transparent) text-bg transition before:absolute before:inset-auto before:size-2 before:shrink-0 before:rounded-full before:content-[''] hover:before:bg-muted-fg/20 sm:size-4 sm:before:size-1.7",
                 "in-disabled:bg-muted",
                 isSelected && [
                   "inset-ring-(--radio-ring,var(--color-ring)) bg-(--radio-bg,var(--color-primary)) text-(--radio-fg,var(--color-primary-fg)) before:bg-bg hover:before:bg-muted/90",
                   "group-invalid:inset-ring-danger-subtle-fg/70 group-invalid:bg-danger group-invalid:text-danger-fg",
                 ],
+                isFocusVisible && [
+                  "inset-ring-(--radio-ring,var(--color-ring)) ring-(--radio-ring,var(--color-ring))/20 ring-3",
+                  "group-invalid:inset-ring-danger-subtle-fg/70 group-invalid:text-danger-fg group-invalid:ring-danger-subtle-fg/20",
+                ],
                 isInvalid &&
                   "inset-ring-danger-subtle-fg/70 bg-danger-subtle/5 text-danger-fg ring-danger-subtle-fg/20",
               ])}
             />
-            <Label data-slot="control-label" elementType="span">
-              {children}
-            </Label>
-          </>
+            {content}
+          </div>
         );
       })}
     </RadioButton>
   );
 }
+
+/** A self-contained radio option: a `RadioField` (owns the value/input) wrapping a `RadioControl`. */
+export function Radio({ children, className, ...props }: RadioFieldProps) {
+  return (
+    <RadioField {...props}>
+      <RadioControl className={className}>{children}</RadioControl>
+    </RadioField>
+  );
+}
+
+export function RadioLabel(props: ComponentProps<typeof Label>) {
+  return <Label elementType="span" data-slot="control-label" {...props} />;
+}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index ccd1d02..fa00891 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from "react";
 import {
   SwitchButton,
   type SwitchButtonProps,
@@ -8,6 +9,7 @@ import { twJoin, twMerge } from "tailwind-merge";
 import { Label } from "@/components/ui/field";
 import { cx } from "@/lib/primitive";
 
+/** The field wrapper that owns the switch's form input and state. Compose with `SwitchControl`. */
 export function SwitchField({ className, ...props }: SwitchFieldProps) {
   return (
     <SwitchFieldPrimitive
@@ -22,7 +24,8 @@ export function SwitchField({ className, ...props }: SwitchFieldProps) {
   );
 }
 
-export function Switch({ children, className, ...props }: SwitchButtonProps) {
+/** The clickable area of a switch (indicator + label). Must be rendered inside a `SwitchField`. */
+export function SwitchControl({ children, className, ...props }: SwitchButtonProps) {
   return (
     <SwitchButton
       className={cx(
@@ -64,9 +67,7 @@ export function Switch({ children, className, ...props }: SwitchButtonProps) {
           {typeof children === "function" ? (
             children(values)
           ) : typeof children === "string" ? (
-            <Label elementType="span" data-slot="control-label">
-              {children}
-            </Label>
+            <SwitchLabel>{children}</SwitchLabel>
           ) : (
             children
           )}
@@ -75,3 +76,16 @@ export function Switch({ children, className, ...props }: SwitchButtonProps) {
     </SwitchButton>
   );
 }
+
+/** A self-contained switch: a `SwitchField` (owns the input) wrapping a `SwitchControl`. */
+export function Switch({ children, className, ...props }: SwitchFieldProps) {
+  return (
+    <SwitchField {...props}>
+      <SwitchControl className={className}>{children}</SwitchControl>
+    </SwitchField>
+  );
+}
+
+export function SwitchLabel(props: ComponentProps<typeof Label>) {
+  return <Label elementType="span" data-slot="control-label" {...props} />;
+}
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 4d1ff4b..11691bb 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -32,7 +32,7 @@ import { CardDescription, CardTitle } from "@/components/ui/card";
 import { Menu, MenuContent, MenuItem, MenuLabel } from "@/components/ui/menu.tsx";
 import { cx } from "@/lib/primitive";
 import type { ColumnDef } from "@/types";
-import { Checkbox, CheckboxField } from "./checkbox";
+import { Checkbox } from "./checkbox";
 
 interface TableProps extends Omit<TablePrimitiveProps, "className"> {
   allowResize?: boolean;
@@ -178,9 +178,7 @@ const TableHeader = <T extends object>({ children, ref, columns, className, ...p
           data-slot="table-column"
           className={twMerge("first:ps-(--gutter,--spacing(2))", !bleed && "sm:last:pe-1 sm:first:ps-1")}>
           {selectionMode === "multiple" && (
-            <CheckboxField className="gap-x-0" slot="selection">
-              <Checkbox className="col-span-1" />
-            </CheckboxField>
+            <Checkbox className="[--indicator-mt:0] sm:[--indicator-mt:0]" slot="selection" />
           )}
         </Column>
       )}
@@ -231,9 +229,7 @@ const TableRow = <T extends object>({ children, className, columns, id, ref, ...
       )}
       {selectionBehavior === "toggle" && (
         <TableCell className="px-0">
-          <CheckboxField className="gap-x-0" slot="selection">
-            <Checkbox className="col-span-1" />
-          </CheckboxField>
+          <Checkbox className="[--indicator-mt:0] sm:[--indicator-mt:0]" slot="selection" />
         </TableCell>
       )}
       <Collection items={columns}>{children}</Collection>
diff --git a/src/components/ui/tree.tsx b/src/components/ui/tree.tsx
index ef2f0ff..0d96f0f 100644
--- a/src/components/ui/tree.tsx
+++ b/src/components/ui/tree.tsx
@@ -9,7 +9,7 @@ import type {
 import { TreeItemContent, TreeItem as TreeItemPrimitive, Tree as TreePrimitive } from "react-aria-components/Tree";
 import { twJoin, twMerge } from "tailwind-merge";
 import { cx } from "@/lib/primitive";
-import { Checkbox, CheckboxField } from "./checkbox";
+import { Checkbox } from "./checkbox";
 
 const Tree = <T extends object>({ className, ...props }: TreeProps<T>) => {
   return (
@@ -58,9 +58,7 @@ const TreeContent = ({ className, children, ...props }: TreeContentProps) => {
         <div className={twMerge("relative flex w-full min-w-0 items-center gap-x-1 truncate text-sm/6", className)}>
           {values.allowsDragging && <Button className="sr-only" slot="drag" />}
           {values.selectionMode === "multiple" && values.selectionBehavior === "toggle" && (
-            <CheckboxField className="gap-x-0" slot="selection">
-              <Checkbox className="col-span-1" />
-            </CheckboxField>
+            <Checkbox className="[--indicator-mt:0] sm:[--indicator-mt:0]" slot="selection" />
           )}
           <div
             className={twJoin(
diff --git a/src/index.ts b/src/index.ts
index 62becf8..21decaf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,7 @@ export * from "./components/composite/render/pagination-render.tsx";
 export * from "./components/composite/render/sidebar-items-render.tsx";
 export * from "./components/composite/render/svg-html-render.tsx";
 export * from "./components/composite/resource-clear-filters.tsx";
+export * from "./components/composite/resource-filters.tsx";
 export * from "./components/composite/resource-table.tsx";
 export * from "./components/shared/badge-styles.ts";
 export * from "./components/shared/button-styles.ts";
diff --git a/src/stories/checkbox.stories.tsx b/src/stories/checkbox.stories.tsx
index e393f68..89259aa 100644
--- a/src/stories/checkbox.stories.tsx
+++ b/src/stories/checkbox.stories.tsx
@@ -1,22 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, within } from "storybook/test";
-import { Checkbox, CheckboxField } from "@/components/ui/checkbox";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const LABEL = "Accept terms and conditions";
 
 const meta = {
   title: "UI/Checkbox",
-  component: CheckboxField,
+  component: Checkbox,
   tags: ["autodocs"],
   args: {
-    children: null,
+    children: LABEL,
   },
-  render: (args) => (
-    <CheckboxField {...args}>
-      <Checkbox>{LABEL}</Checkbox>
-    </CheckboxField>
-  ),
-} satisfies Meta<typeof CheckboxField>;
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 
diff --git a/src/stories/radio.stories.tsx b/src/stories/radio.stories.tsx
index 41f913f..375ee2e 100644
--- a/src/stories/radio.stories.tsx
+++ b/src/stories/radio.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, within } from "storybook/test";
-import { Radio, RadioField, RadioGroup } from "@/components/ui/radio";
+import { Radio, RadioGroup } from "@/components/ui/radio";
 
 const meta = {
   title: "UI/Radio",
@@ -10,15 +10,9 @@ const meta = {
     "aria-label": "Subscription plan",
     children: (
       <>
-        <RadioField value="free">
-          <Radio>Free</Radio>
-        </RadioField>
-        <RadioField value="pro">
-          <Radio>Pro</Radio>
-        </RadioField>
-        <RadioField value="enterprise">
-          <Radio>Enterprise</Radio>
-        </RadioField>
+        <Radio value="free">Free</Radio>
+        <Radio value="pro">Pro</Radio>
+        <Radio value="enterprise">Enterprise</Radio>
       </>
     ),
   },
diff --git a/src/stories/switch.stories.tsx b/src/stories/switch.stories.tsx
index 2164a9b..f67afa4 100644
--- a/src/stories/switch.stories.tsx
+++ b/src/stories/switch.stories.tsx
@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, within } from "storybook/test";
-import { Switch, SwitchField } from "@/components/ui/switch";
+import { Switch } from "@/components/ui/switch";
 
 const meta = {
   title: "UI/Switch",
-  component: SwitchField,
+  component: Switch,
   tags: ["autodocs"],
   args: {
-    children: <Switch>Enable notifications</Switch>,
+    children: "Enable notifications",
   },
-} satisfies Meta<typeof SwitchField>;
+} satisfies Meta<typeof Switch>;
 
 export default meta;