Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
[TextField] Document how to hide label in FilledInput #23738
Comments
|
@oliviertassinari is this issue good to take? I would like to give It a try! |
|
@AGPX There is a feature for this, but it's barely documented: Before After <TextField
hiddenLabel
id="standard-start-adornment"
size="small"
variant="filled"
InputProps={{
startAdornment: <InputAdornment position="start">Kg</InputAdornment>
}}
/>How about we add a new demo under https://next.material-ui.com/components/text-fields/#sizes? |
|
Maybe something like this? diff --git a/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx
new file mode 100644
index 0000000000..456953127e
--- /dev/null
+++ b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Box from '@material-ui/core/Box';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& .MuiTextField-root': {
+ margin: theme.spacing(1),
+ width: 200,
+ },
+ },
+ }),
+);
+
+export default function TextFieldHiddenLabel() {
+ const classes = useStyles();
+
+ return (
+ <form className={classes.root} noValidate autoComplete="off">
+ <Box sx={{ display: 'flex', alignItems: 'center' }}>
+ <label htmlFor="filled-hidden-label-small">Hidden label</label>
+ <TextField
+ hiddenLabel
+ id="filled-hidden-label-small"
+ defaultValue="Small"
+ variant="filled"
+ size="small"
+ />
+ </Box>
+ <Box sx={{ display: 'flex', alignItems: 'center' }}>
+ <label htmlFor="filled-hidden-label-normal">Hidden label</label>
+ <TextField
+ hiddenLabel
+ id="filled-hidden-label-normal"
+ defaultValue="Normal"
+ variant="filled"
+ />
+ </Box>
+ </form>
+ );
+}
diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md
index 6db59637be..b9c2669f6a 100644
--- a/docs/src/pages/components/text-fields/text-fields.md
+++ b/docs/src/pages/components/text-fields/text-fields.md
@@ -71,6 +71,10 @@ Fancy smaller inputs? Use the `size` prop.
{{"demo": "pages/components/text-fields/TextFieldSizes.js"}}
+The `filled` variant input height can be further reduced by rendering the label outside of it.
+
+{{"demo": "pages/components/text-fields/TextFieldHiddenLabel.js"}}
+
## Layout
`margin` prop can be used to alter the vertical spacing of inputs.
|
oliviertassinari
changed the title
|
Excuse me, but if a label is not specified, why do I have to explicitly hide it? The current one is not an expected behavior. |
The TextField top padding is wrong when variant is 'filled' and no label is specified.
Current Behavior😯
When variant = 'filled' and no label is used, the top padding of the TextField seems to still consider the label space (when variant = 'standard', you haven't this issue).
Expected Behavior🤔
When variant = 'filled' and no label is used, the top padding of the TextField must be reduced like the one used when variant = 'standard'.
Steps to Reproduce🕹
Steps:
Example at the link: https://codesandbox.io/s/material-ui-issue-forked-p9bx3
The issue is in the classes: '.MuiFilledInput-input' (and '.MuiFilledInput-inputMarginDense' for the small size).
Context🔦
Your Environment🌎