[TextInput] Create new component

docs/data/api/text-input.json

@@ -0,0 +1,17 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "TextInput",
+  "imports": ["import { TextInput } from '@base_ui/react/TextInput';"],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "TextInput",
+  "forwardsRefTo": "HTMLInputElement",
+  "filename": "/packages/mui-base/src/TextInput/TextInput.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-text-input/\">Text Input</a></li></ul>",
+  "cssComponent": false
+}

docs/data/components/field/UnstyledFieldIntroduction/system/index.js

@@ -1,14 +1,15 @@
 'use client';
 import * as React from 'react';
 import { Field } from '@base_ui/react/Field';
+import { TextInput } from '@base_ui/react/TextInput';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldIntroduction() {
   return (
     <FieldRoot validate={(value) => (value === 'admin' ? 'Name not allowed' : null)}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
         <Field.Label>Name</Field.Label>
-        <FieldControl required pattern="[a-zA-Z0-9]+" />
+        <Input required pattern="[a-zA-Z0-9]+" />
       </div>
       <Field.Validity>
         {({ validity, value }) => {
@@ -40,7 +41,7 @@ const FieldRoot = styled(Field.Root)`
   width: 275px;
 `;
 
-const FieldControl = styled(Field.Control)`
+const Input = styled(TextInput)`
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;

docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx

@@ -1,14 +1,15 @@
 'use client';
 import * as React from 'react';
 import { Field } from '@base_ui/react/Field';
+import { TextInput } from '@base_ui/react/TextInput';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldIntroduction() {
   return (
     <FieldRoot validate={(value) => (value === 'admin' ? 'Name not allowed' : null)}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
         <Field.Label>Name</Field.Label>
-        <FieldControl required pattern="[a-zA-Z0-9]+" />
+        <Input required pattern="[a-zA-Z0-9]+" />
       </div>
       <Field.Validity>
         {({ validity, value }) => {
@@ -40,7 +41,7 @@ const FieldRoot = styled(Field.Root)`
   width: 275px;
 `;
 
-const FieldControl = styled(Field.Control)`
+const Input = styled(TextInput)`
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;

docs/data/components/field/UnstyledFieldPassword.js

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Field } from '@base_ui/react/Field';
+import { TextInput } from '@base_ui/react/TextInput';
 import { styled } from '@mui/system';
 
 function validate(value) {
@@ -31,7 +32,7 @@ export default function UnstyledFieldPassword() {
   return (
     <FieldRoot invalid={errors.length > 0}>
       <Field.Label>Password</Field.Label>
-      <FieldControl
+      <Input
         type="password"
         value={value}
         onChange={(event) => setValue(event.currentTarget.value)}
@@ -51,7 +52,7 @@ const FieldRoot = styled(Field.Root)`
   width: 275px;
 `;
 
-const FieldControl = styled(Field.Control)`
+const Input = styled(TextInput)`
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;

docs/data/components/field/UnstyledFieldPassword.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Field } from '@base_ui/react/Field';
+import { TextInput } from '@base_ui/react/TextInput';
 import { styled } from '@mui/system';
 
 function validate(value: string) {
@@ -31,7 +32,7 @@ export default function UnstyledFieldPassword() {
   return (
     <FieldRoot invalid={errors.length > 0}>
       <Field.Label>Password</Field.Label>
-      <FieldControl
+      <Input
         type="password"
         value={value}
         onChange={(event) => setValue(event.currentTarget.value)}
@@ -51,7 +52,7 @@ const FieldRoot = styled(Field.Root)`
   width: 275px;
 `;
 
-const FieldControl = styled(Field.Control)`
+const Input = styled(TextInput)`
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;

docs/data/components/field/UnstyledFieldPassword.tsx.preview

@@ -1,6 +1,6 @@
 <FieldRoot invalid={errors.length > 0}>
   <Field.Label>Password</Field.Label>
-  <FieldControl
+  <Input
     type="password"
     value={value}
     onChange={(event) => setValue(event.currentTarget.value)}

docs/data/components/field/UnstyledFieldServerError.js

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Field } from '@base_ui/react/Field';
+import { TextInput } from '@base_ui/react/TextInput';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldServerError() {
@@ -40,7 +41,7 @@ export default function UnstyledFieldServerError() {
     <form onSubmit={handleSubmit} noValidate>
       <FieldRoot invalid={error} name="email">
         <Field.Label>Email address</Field.Label>
-        <FieldControl
+        <Input
           ref={controlRef}
           type="email"
           required
@@ -89,7 +90,7 @@ const FieldRoot = styled(Field.Root)`
   width: 275px;
 `;
 
-const FieldControl = styled(Field.Control)`
+const Input = styled(TextInput)`
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;

docs/data/components/field/UnstyledFieldServerError.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Field } from '@base_ui/react/Field';
+import { TextInput } from '@base_ui/react/TextInput';
 import { styled } from '@mui/system';
 
 type Status = 'initial' | 'loading' | 'success' | 'error';
@@ -42,7 +43,7 @@ export default function UnstyledFieldServerError() {
     <form onSubmit={handleSubmit} noValidate>
       <FieldRoot invalid={error} name="email">
         <Field.Label>Email address</Field.Label>
-        <FieldControl
+        <Input
           ref={controlRef}
           type="email"
           required
@@ -91,7 +92,7 @@ const FieldRoot = styled(Field.Root)`
   width: 275px;
 `;
 
-const FieldControl = styled(Field.Control)`
+const Input = styled(TextInput)`
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;

docs/data/components/field/field.mdx

@@ -24,7 +24,7 @@ packageName: '@base_ui/react'
 Fields are implemented using a collection of related components:
 
 - `<Field.Root />` is a top-level component that wraps all other components.
-- `<Field.Control />` renders the control when not using a native Base UI input component.
+- `<Field.Control />` renders a control when not using a native Base UI input component.
 - `<Field.Label />` renders a label for the control.
 - `<Field.Description />` renders an optional description for the control to provide additional information.
 - `<Field.Error />` renders error messages for the control.
@@ -54,7 +54,7 @@ All Base UI input components are aware of Base UI's `Field` component. The lab
 </Field.Root>
 ```
 
-When using a native control like `input` or a custom component which is not aware of Base UI's `Field`, use `Field.Control`:
+When using a custom component which is not aware of Base UI's `Field`, use `Field.Control`:
 
 ```jsx
 <Field.Root>

docs/data/components/form/FormIntroduction/system/index.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Form } from '@base_ui/react/Form';
 import { Fieldset } from '@base_ui/react/Fieldset';
 import { Field } from '@base_ui/react/Field';
+import { TextInput } from '@base_ui/react/TextInput';
 import { styled } from '@mui/system';
 
 export default function FormIntroduction() {
@@ -53,12 +54,12 @@ export default function FormIntroduction() {
         </p>
         <Field.Root name="username">
           <Field.Label>Username</Field.Label>
-          <FieldControl required />
+          <Input required />
           <FieldError />
         </Field.Root>
         <Field.Root name="password">
           <Field.Label>Password</Field.Label>
-          <FieldControl type="password" required />
+          <Input type="password" required />
           <FieldError />
         </Field.Root>
       </FieldsetRoot>
@@ -78,7 +79,7 @@ const FormRoot = styled(Form.Root)`
   width: 275px;
 `;
 
-const FieldControl = styled(Field.Control)`
+const Input = styled(TextInput)`
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;

docs/data/components/form/FormIntroduction/system/index.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Form } from '@base_ui/react/Form';
 import { Fieldset } from '@base_ui/react/Fieldset';
 import { Field } from '@base_ui/react/Field';
+import { TextInput } from '@base_ui/react/TextInput';
 import { styled } from '@mui/system';
 
 type Status = 'initial' | 'loading' | 'success' | 'error';
@@ -55,12 +56,12 @@ export default function FormIntroduction() {
         </p>
         <Field.Root name="username">
           <Field.Label>Username</Field.Label>
-          <FieldControl required />
+          <Input required />
           <FieldError />
         </Field.Root>
         <Field.Root name="password">
           <Field.Label>Password</Field.Label>
-          <FieldControl type="password" required />
+          <Input type="password" required />
           <FieldError />
         </Field.Root>
       </FieldsetRoot>
@@ -80,7 +81,7 @@ const FormRoot = styled(Form.Root)`
   width: 275px;
 `;
 
-const FieldControl = styled(Field.Control)`
+const Input = styled(TextInput)`
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;

docs/data/components/text-input/TextInputIntroduction/system/index.js

@@ -0,0 +1,21 @@
+'use client';
+import * as React from 'react';
+import { TextInput as TextInputPrimitive } from '@base_ui/react/TextInput';
+import { styled } from '@mui/system';
+
+export default function TextFieldIntroduction() {
+  return <TextInput />;
+}
+
+const TextInput = styled(TextInputPrimitive)`
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px;
+  font-size: 16px;
+  width: 200px;
+
+  &:focus {
+    outline: 0;
+    border-color: #0070f3;
+  }
+`;

docs/data/components/text-input/TextInputIntroduction/system/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+import * as React from 'react';
+import { TextInput as TextInputPrimitive } from '@base_ui/react/TextInput';
+import { styled } from '@mui/system';
+
+export default function TextFieldIntroduction() {
+  return <TextInput />;
+}
+
+const TextInput = styled(TextInputPrimitive)`
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px;
+  font-size: 16px;
+  width: 200px;
+
+  &:focus {
+    outline: 0;
+    border-color: #0070f3;
+  }
+`;

docs/data/components/text-input/TextInputIntroduction/system/index.tsx.preview

@@ -0,0 +1 @@
+<TextInput />

docs/data/components/text-input/text-input.mdx

@@ -0,0 +1,28 @@
+---
+productId: base-ui
+title: React TextInput component
+description: Text Input is a UI element that lets users input single line text.
+components: TextInput
+githubLabel: 'component: text-input'
+packageName: '@base_ui/react'
+---
+
+# Text Input
+
+<Description />
+
+<ComponentLinkHeader design={false} />
+
+<Demo demo="TextInputIntroduction" defaultCodeOpen="false" bg="gradient" />
+
+## Installation
+
+<InstallationInstructions componentName="TextInput" />
+
+## Anatomy
+
+`<TextInput />` renders an `<input>`, enhanced with field context when placed inside a [`Field`](/components/react-field/).
+
+```tsx
+<TextInput />
+```

docs/data/pages.ts

@@ -40,6 +40,7 @@ const pages: readonly RouteMetadata[] = [
       { pathname: '/components/react-slider', title: 'Slider' },
       { pathname: '/components/react-switch', title: 'Switch' },
       { pathname: '/components/react-tabs', title: 'Tabs' },
+      { pathname: '/components/react-text-input', title: 'Text Input' },
       { pathname: '/components/react-tooltip', title: 'Tooltip' },
     ],
   },

docs/data/translations/api-docs/text-input/text-input.json

@@ -0,0 +1,10 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "render": { "description": "A function to customize rendering of the component." }
+  },
+  "classDescriptions": {}
+}

packages/mui-base/src/Field/Control/FieldControl.tsx

@@ -42,7 +42,7 @@ const FieldControl = React.forwardRef(function FieldControl(
     ownerState: fieldOwnerState,
     name: fieldName,
     disabled: fieldDisabled,
-  } = useFieldRootContext(false);
+  } = useFieldRootContext();
 
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
@@ -77,7 +77,7 @@ const FieldControl = React.forwardRef(function FieldControl(
 namespace FieldControl {
   export type OwnerState = FieldRoot.OwnerState;
 
-  export interface Props extends BaseUIComponentProps<'input', OwnerState> {
+  export interface Props extends BaseUIComponentProps<'input' | 'textarea' | 'select', OwnerState> {
     /**
      * Callback fired when the `value` changes. Use when controlled.
      */

packages/mui-base/src/TextInput/TextInput.test.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { TextInput } from '@base_ui/react/TextInput';
+import { createRenderer } from '@mui/internal-test-utils';
+import { describeConformance } from '../../test/describeConformance';
+
+describe('<TextInput />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<TextInput />, () => ({
+    refInstanceof: window.HTMLInputElement,
+    render,
+  }));
+});