Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add HTML input section to TextField page #45439

Merged
merged 6 commits into from
Mar 10, 2025
Merged

[docs] Add HTML input section to TextField page #45439

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2212a22
add HTML input section
siriwatknp Feb 28, 2025
fae78f2
add info
siriwatknp Feb 28, 2025
a7284fc
Merge branch 'master' into docs/textfield-input-htmlInput
siriwatknp Feb 28, 2025
82dbaaf
Apply suggestions from code review
siriwatknp Mar 6, 2025
56d5468
Merge branch 'master' of https://github.com/mui/material-ui into docs…
siriwatknp Mar 7, 2025
8a34122
apply suggestion
siriwatknp Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions docs/data/material/components/text-fields/text-fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,31 @@

{{"demo": "FormPropsTextFields.js"}}

## Controlling the HTML input

Use `slotProps.htmlInput` to pass attributes to the underlying `input` element.

```jsx
<TextField slotProps={{ htmlInput: { 'data-testid': '…' } }} />
```

The rendered HTML input will look like this:

Check warning on line 46 in docs/data/material/components/text-fields/text-fields.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.

Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/material/components/text-fields/text-fields.md", "range": {"start": {"line": 46, "column": 25}}}, "severity": "WARNING"}

```html
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
type="text"
data-testid="…"
/>
```

:::warning
`slotProps.htmlInput` is not the same as `slotProps.input`.
`slotProps.input` refers to the React `<Input />` component that's rendered based on the specified variant prop.
`slotProps.htmlInput` refers to the HTML `<input>` element rendered within that Input component, regardless of the variant.
:::

## Validation

The `error` prop toggles the error state.
Expand Down
Loading