mui / mui/material-ui

[TextField] Implement variant without shrinking label

Open
#27,940 4 comments 7 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

scope: text field type: new feature waiting for 👍
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

This isn't standard Material UI, but the spec's handling of input labels is perhaps one of its most loved and hated bits. Labels outside is a pretty common pattern, so would be nice to just have a variant for it, to avoid losing the convenience of the high-level TextField, etc abstraction

  • I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Basically something like <TextField variant="normal"/> would render

<FormControl ..>
   <InputLabel> ...  // perhaps a bit larger/bolder than the MUI default, no shrink
   <OutlinedInput> ..
   <FormHelperText>..
   ...   

Basically something sort of like the bootstrap input styling example

Motivation 🔦

Ease of use for a non-spec, but common pattern for fields and their input labels

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.