In Material-UI (MUI) TextField, we can have both a label and a placeholder, but when the text field is empty, we can only see the label. We have to start editing the TextField in order to see the placeholder. Is there a way to say that both the label and placeholder should show initially when the field is empty? We'd also like to style the placeholder slightly differently by making it slightly gray compared to the black label text color. Is there a way to do this?
you can force input label to shrink. https://mui.com/components/text-fields/#shrink
you can add input Text color with sx props on TextField. placeholder takes color from the input text color too. you can test this by removing inputProps props in below code.
if you want different colors for input text and placeholder use inputProps
ref: Styling the placeholder in a TextField
<TextField
sx={{
"& .MuiOutlinedInput-root": {
color: "red"
}
}}
variant="outlined"
label="Your custom label"
placeholder="Placeholder Text"
InputLabelProps={{ shrink: true }}
inputProps={{
sx: {
"&::placeholder": {
color: "green"
}
}
}}
/>
iam still looking the best resolution..
my current approach
<TextField focused label="Standard" placeholder='lorem ipsum' />
or
<TextField InputLabelProps={{ shrink: true }} label="Standard" placeholder='lorem ipsum' />
This works for me:
<TextField InputLabelProps={{ shrink: true }} label="Name" placeholder='lorem ipsum' />
You can use placeholder and label both. but, when the user click on the textfield, the placeholder will be displayed
<TextField id="standard-basic" placeholder="enter" label="Standard" variant="standard" />
https://codesandbox.io/s/basictextfields-material-demo-forked-i7tcn?file=/demo.js
In actually it is not a placeholder in textfield. It is label.
It changes with simple classname of textfield "MUI form label root".
Assign colour on normal way.
Related
In my react app, I would like to control open/close of a material ui v5 Datepicker by clicking an icon button:
function handleShowCalendar() {
setState({ showCalendar: true })
}
<TextField
{...params}
autoFocus={props.autoFocus}
fullWidth
placeholder="Enter a task..."
variant="outlined"
size="small"
InputProps={{
...params.InputProps,
onKeyUp: handleKeyUp,
endAdornment: addTodo.isLoading ? (
<Box position="absolute" top={10} right={10}>
<CircularProgress size={16} />
</Box>
) : (
<Box position="absolute" top={-4} right={0}>
<IconButton
onClick={handleShowCalendar}
disabled={state.text.length <= 0}
>
<CalendarToday />
</IconButton>
</Box>
),
}}
/>
...
<DatePicker
open={state.showCalendar}
value={state.due}
onChange={handleChangeDate}
onClose={() => setState({ showCalendar: false })}
disableHighlightToday
// DialogProps={{ sx: { postition: "inline" } }}
renderInput={(params) => <Fragment {...params} />}
showToolbar={true}
ToolbarComponent={() => (
<AppBar position="static">
<Toolbar>
<Typography variant="h6">Due Date</Typography>
</Toolbar>
</AppBar>
)}
/>
</Fragment>
The problem is the position of the Datepicker is always at the top left corner. Can anyone help why the Datepicker won't show like inline, what I am missing in above code? Thanks.
As an answer to the question in the title, it seems that the code you have posted does open and close the DatePicker.
It sounds like the second question is the one that needs answering, whether it will show "inline".
It seems that the "absolute" position of the Box surrounding the IconButton and the hardcoded top and right values are preventing the borders of the DatePicker from being inside of the TextField.
Here's a Code Sandbox illustrating a DatePicker within a TextField.
If you would like to clarify the positioning you prefer, please do so.
I am trying to render a dropdown using #mui/material/Select and want the top border to extend next to the label. Right now there is white space between the label and the right edge of the dropdown div. I checked dev tools and the only border property I could identify was border-radius. Is there a way to make the border extend up next to edge of the label ?
Rendered Dropdown
YearDropdown.js
import React from 'react';
import InputLabel from '#mui/material/InputLabel';
import MenuItem from '#mui/material/MenuItem';
import FormControl from '#mui/material/FormControl';
import Select from '#mui/material/Select';
import styled from 'styled-components';
import { BEM_Date } from 'containerMfe/Functions';
const Form = styled(FormControl)`
width: 80px;
margin-bottom: 15px!important;
& > div > div {
padding: 10px;
}
`
export default function YearDropdown({ columns, yr, handler }) {
const years = [...new Set(columns.map(date => BEM_Date(date).getFullYear()))]
return (
<React.Fragment>
<Form>
<InputLabel id='year-dropdown-label'>Year</InputLabel>
<Select
fullWidth
labelId='year-dropdown-label'
id='year-dropdown'
value={yr}
onChange={handler}
>
{years.map(year => <MenuItem key={'year-' + year} value={year}>{year}</MenuItem>)}
</Select>
</Form>
</React.Fragment>
)
}
I ran into the same issue and could not solve it. In my case, not setting a value or default value seemed to fix the label issue, but my input had to be controlled.
What did work was using the TextField component, with the select prop set to true with InputLabelProps={{ shrink: true }}.
Here is my original Select whose label I could not fix, followed by an equivalent TextField example that works:
// original select implementation with broken label
<FormControl fullWidth>
<InputLabel id="sort-by-label">Sort By</InputLabel>
<Select
label="sort-by-label"
labelId="sort-by-label"
id="sort-by"
value={sortBy}
onChange={handleSortByChange}
variant="outlined"
>
{keys.map((key) => (
<MenuItem key={key} value={key}>
{key}
</MenuItem>
))}
</Select>
</FormControl>
// equivalent TextField implementation that seems to have a functional label
<TextField
select
value={sortBy}
onChange={handleSortByChange}
variant="outlined"
label="Sort By"
InputLabelProps={{ shrink: true }}
>
{keys.map((key) => (
<MenuItem key={key} value={key}>
{key}
</MenuItem>
))}
</TextField>
It is possible to put button in endAdornment in TextField, e.g. with code:
<TextField size="small" type="text" id="m_general_reference" value={this.props.invoice.general_reference}
InputProps={{
endAdornment: (
<InputAdornment>
<Button variant="outlined" size="small" style={{textTransform: 'none', height: '20px'}}>
Check General Reference
</Button>
</InputAdornment>
)
}} />
But this code does not work when TextField is changed to Input. Is there more or less standard markup to put endAdornment button in InputField? I am interested in more or less standard solution only and no hacks (in case of hacks I will go with TextField).
Using Material-UI v1:
How do I change the font of a TextField? I'm trying to apply a Roboto Mono font to it.
What I currently have is
import 'typeface-roboto-mono';
...
<TextField
...
inputProps={{ fontFamily: 'Roboto Mono' }}
/>
But that's not working.
Thanks.
In some material-ui components, we have a prop called color. We can pass 'default', 'inherit', 'primary', 'accent', 'contrast' to it. But can we pass a custom color to it? For example, I need to style a button in red. How can I do it if it's not my primary or accent color?
You can just give the button a style={{backgroundColor: 'red'}} and it will change the color of the button.
<FlatButton label="My Colored Button" style={{backgroundColor: 'red'}} />