diff --git a/docs/manifest.json b/docs/manifest.json
index b6e8ab5aebf1df..2f89e6aacd59b8 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -641,12 +641,6 @@
"markdown_source": "../packages/components/src/base-control/README.md",
"parent": "components"
},
- {
- "title": "BaseField",
- "slug": "base-field",
- "markdown_source": "../packages/components/src/base-field/README.md",
- "parent": "components"
- },
{
"title": "BorderBoxControl",
"slug": "border-box-control",
diff --git a/packages/components/src/base-field/README.md b/packages/components/src/base-field/README.md
deleted file mode 100644
index 53a7cd0fc53aea..00000000000000
--- a/packages/components/src/base-field/README.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# BaseField
-
-
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-
-
-`BaseField` is an internal (i.e., not exported in the `index.js`) primitive component used for building more complex fields like `TextField`. It provides error handling and focus styles for field components. It does _not_ handle layout of the component aside from wrapping the field in a `Flex` wrapper.
-
-## Usage
-
-`BaseField` is primarily used as a hook rather than a component:
-
-```js
-function useExampleField( props ) {
- const { as = 'input', ...baseProps } = useBaseField( props );
-
- const inputProps = {
- as,
- // more cool stuff here
- };
-
- return { inputProps, ...baseProps };
-}
-
-function ExampleField( props, forwardRef ) {
- const { preFix, affix, disabled, inputProps, ...baseProps } =
- useExampleField( props );
-
- return (
-
- { preFix }
-
- { affix }
-
- );
-}
-```
-
-## Props
-
-### `disabled`: `boolean`
-
-Whether the field is disabled.
-
-- Required: No
-
-### `hasError`: `boolean`
-
-Renders an error style around the component.
-
-- Required: No
-- Default: `false`
-
-### `isInline`: `boolean`
-
-Renders a component that can be inlined in some text.
-
-- Required: No
-- Default: `false`
-
-### `isSubtle`: `boolean`
-
-Renders a subtle variant of the component.
-
-- Required: No
-- Default: `false`
diff --git a/packages/components/src/base-field/hook.ts b/packages/components/src/base-field/hook.ts
deleted file mode 100644
index 9e3ae89b33fa5f..00000000000000
--- a/packages/components/src/base-field/hook.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
-import { useControlGroupContext } from '../ui/control-group';
-import { useFlex } from '../flex';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
-import type { BaseFieldProps } from './types';
-
-export function useBaseField(
- props: WordPressComponentProps< BaseFieldProps, 'div' >
-) {
- const {
- className,
- hasError = false,
- isInline = false,
- isSubtle = false,
- // Extract these because useFlex doesn't accept it.
- defaultValue,
- disabled,
- ...flexProps
- } = useContextSystem( props, 'BaseField' );
-
- const { styles: controlGroupStyles } = useControlGroupContext();
- const cx = useCx();
-
- const classes = useMemo(
- () =>
- cx(
- styles.BaseField,
- controlGroupStyles,
- isSubtle && styles.subtle,
- hasError && styles.error,
- isInline && styles.inline,
- className
- ),
- [ className, controlGroupStyles, cx, hasError, isInline, isSubtle ]
- );
-
- return {
- ...useFlex( { ...flexProps, className: classes } ),
- disabled,
- defaultValue,
- };
-}
diff --git a/packages/components/src/base-field/index.ts b/packages/components/src/base-field/index.ts
deleted file mode 100644
index 263e623dae3167..00000000000000
--- a/packages/components/src/base-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useBaseField } from './hook';
diff --git a/packages/components/src/base-field/styles.ts b/packages/components/src/base-field/styles.ts
deleted file mode 100644
index 2f357d90c14b2d..00000000000000
--- a/packages/components/src/base-field/styles.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS, reduceMotion } from '../utils';
-import { safariOnly } from '../utils/browsers';
-
-export const BaseField = css`
- background: ${ CONFIG.controlBackgroundColor };
- border-radius: ${ CONFIG.controlBorderRadius };
- border: 1px solid;
- border-color: ${ COLORS.ui.border };
- box-shadow: ${ CONFIG.controlBoxShadow };
- display: flex;
- flex: 1;
- font-size: ${ CONFIG.fontSize };
- outline: none;
- padding: 0 8px;
- position: relative;
- transition: border-color ${ CONFIG.transitionDurationFastest } ease;
- ${ reduceMotion( 'transition' ) }
- width: 100%;
-
- &[disabled] {
- opacity: 0.6;
- }
-
- &:hover {
- border-color: ${ COLORS.ui.borderHover };
- }
-
- &:focus,
- &[data-focused='true'] {
- border-color: ${ COLORS.ui.theme };
- box-shadow: ${ CONFIG.controlBoxShadowFocus };
- }
-`;
-
-export const subtle = css`
- background-color: transparent;
-
- &:hover,
- &:active,
- &:focus,
- &[data-focused='true'] {
- background: ${ CONFIG.controlBackgroundColor };
- }
-`;
-
-export const error = css`
- border-color: ${ CONFIG.controlDestructiveBorderColor };
-
- &:hover,
- &:active {
- border-color: ${ CONFIG.controlDestructiveBorderColor };
- }
-
- &:focus,
- &[data-focused='true'] {
- border-color: ${ CONFIG.controlDestructiveBorderColor };
- box-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };
- }
-`;
-
-export const errorFocus = css`
- border-color: ${ CONFIG.controlDestructiveBorderColor };
- box-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };
-
- &:hover {
- border-color: ${ CONFIG.controlDestructiveBorderColor };
- }
-`;
-
-export const inline = css`
- display: inline-flex;
- vertical-align: baseline;
- width: auto;
-
- ${ safariOnly`
- vertical-align: middle;
- ` }
-`;
diff --git a/packages/components/src/base-field/test/__snapshots__/index.tsx.snap b/packages/components/src/base-field/test/__snapshots__/index.tsx.snap
deleted file mode 100644
index 2e42b498e8093d..00000000000000
--- a/packages/components/src/base-field/test/__snapshots__/index.tsx.snap
+++ /dev/null
@@ -1,141 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`base field props should render error styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -11,11 +11,11 @@
- "-webkit-justify-content": "space-between",
- "-webkit-transition": "border-color 100ms ease",
- "align-items": "center",
- "background": "#fff",
- "border": "1px solid",
-- "border-color": "#d94f4f",
-+ "border-color": "#949494",
- "border-radius": "2px",
- "box-shadow": "transparent",
- "display": "flex",
- "flex": "1",
- "flex-direction": "row",
-`;
-
-exports[`base field props should render inline styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -14,19 +14,18 @@
- "background": "#fff",
- "border": "1px solid",
- "border-color": "#949494",
- "border-radius": "2px",
- "box-shadow": "transparent",
-- "display": "inline-flex",
-+ "display": "flex",
- "flex": "1",
- "flex-direction": "row",
- "font-size": "13px",
- "gap": "calc(4px * 2)",
- "justify-content": "space-between",
- "outline": "none",
- "padding": "0 8px",
- "position": "relative",
- "transition": "border-color 100ms ease",
-- "vertical-align": "baseline",
-- "width": "auto",
-+ "width": "100%",
- },
- ]
-`;
-
-exports[`base field props should render subtle styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -10,11 +10,10 @@
- "-webkit-flex-direction": "row",
- "-webkit-justify-content": "space-between",
- "-webkit-transition": "border-color 100ms ease",
- "align-items": "center",
- "background": "#fff",
-- "background-color": "transparent",
- "border": "1px solid",
- "border-color": "#949494",
- "border-radius": "2px",
- "box-shadow": "transparent",
- "display": "flex",
-`;
-
-exports[`base field should render correctly 1`] = `
-.emotion-0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- gap: calc(4px * 2);
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- width: 100%;
- background: #fff;
- border-radius: 2px;
- border: 1px solid;
- border-color: #949494;
- box-shadow: transparent;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- font-size: 13px;
- outline: none;
- padding: 0 8px;
- position: relative;
- -webkit-transition: border-color 100ms ease;
- transition: border-color 100ms ease;
- width: 100%;
-}
-
-.emotion-0>* {
- min-width: 0;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
- .emotion-0 {
- transition-duration: 0ms;
- }
-}
-
-.emotion-0[disabled] {
- opacity: 0.6;
-}
-
-.emotion-0:hover {
- border-color: #757575;
-}
-
-.emotion-0:focus,
-.emotion-0[data-focused='true'] {
- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-}
-
-
-`;
diff --git a/packages/components/src/base-field/test/index.tsx b/packages/components/src/base-field/test/index.tsx
deleted file mode 100644
index 5ac4a70d16e84d..00000000000000
--- a/packages/components/src/base-field/test/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { useBaseField } from '../index';
-import { View } from '../../view';
-import type { BaseFieldProps } from '../types';
-
-const TestField = ( props: Omit< BaseFieldProps, 'children' > ) => {
- return ;
-};
-
-describe( 'base field', () => {
- it( 'should render correctly', () => {
- const { container } = render( );
- expect( container ).toMatchSnapshot();
- } );
-
- describe( 'props', () => {
- it( 'should render error styles', () => {
- render(
- <>
-
-
-
- );
- expect(
- screen.getByTestId( 'base-field-error' )
- ).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
- } );
-
- it( 'should render inline styles', () => {
- render(
- <>
-
-
-
- );
- expect(
- screen.getByTestId( 'base-field-inline' )
- ).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
- } );
-
- it( 'should render subtle styles', () => {
- render(
- <>
-
-
-
- );
- expect(
- screen.getByTestId( 'base-field-subtle' )
- ).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
- } );
- } );
-
- describe( 'useBaseField', () => {
- it( 'should pass through disabled and defaultValue props', () => {
- // wrap this in a component so that `useContext` calls don't fail inside the hook
- // assertions will still run as normal when we `render` the component :)
- const Component = () => {
- const disabled = true;
- const defaultValue = 'Lorem ipsum';
-
- const result = useBaseField( {
- disabled,
- defaultValue,
- children: '',
- } );
-
- expect( result.disabled ).toBe( disabled );
- expect( result.defaultValue ).toBe( defaultValue );
-
- return null;
- };
-
- render( );
- } );
- } );
-} );
diff --git a/packages/components/src/base-field/types.ts b/packages/components/src/base-field/types.ts
deleted file mode 100644
index 1a6e4378fcd7fc..00000000000000
--- a/packages/components/src/base-field/types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { FlexProps } from '../flex/types';
-
-export type BaseFieldProps = FlexProps & {
- /**
- * Whether the field is disabled.
- */
- disabled?: boolean;
- /**
- * Renders an error style around the component.
- *
- * @default false
- */
- hasError?: boolean;
- /**
- * Renders a component that can be inlined in some text.
- *
- * @default false
- */
- isInline?: boolean;
- /**
- * Renders a subtle variant of the component.
- *
- * @default false
- */
- isSubtle?: boolean;
-};