I am using the Select with the multiple prop. The component works fine, and the InputLabel renders the renders the following:
However, when I add an icon at the beginning via the startAdornment prop, the InputLabel is moved above the input field.
Do you know how to show the label next do the icon when no values are selected?
The code is:
<FormControl className={classes.formControl} fullWidth variant="outlined" size="medium">
<InputLabel name={name} color="secondary" variant="outlined" htmlFor={id} id={id} className={classes.label}>{label}</InputLabel>
<Select
name={name}
labelId={id}
id={id}
multiple
autoWidth
startAdornment={icon}
color="secondary"
value={selectedValues}
onChange={handleChange}
renderValue={selectedOptions => (
<div className={classes.tags}>
{selectedOptions.map(option => (
<Chip key={option.value} label={option.label} size="small" className={classes.chipStyle} />
))}
</div>
)}
>
{options.map(option => (
<MenuItem key={option.value} value={option}>
<Checkbox checked={logicHere} color="primary" />
<ListItemText primary={option.label} />
</MenuItem>
))}
</Select>
</FormControl>
Did you try ?
<Select
InputProps={{
startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
}} />
Related
I want to change the color of the label when its in its floaty state with sx. Not sure how to do that.
<FormControl fullWidth size='small'>
<InputLabel id="demo-simple-select-label" sx={{'& Mui-focused':{color:'red'}}}>Bloques Aerial</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
onChange={changeSecondSelect}
sx={{backgroundColor:'white',color:'black'}}
>
{selectedBlocks?.map((item, index) => {
return(
<MenuItem key={index} value={item}>{item}</MenuItem>
)
})}
</Select>
</FormControl>
You almost had it. By inspecting the DOM, the correct CSS selector is .MuiInputLabel-shrink. So your InputLabel component would be:
<InputLabel
id="demo-simple-select-label"
sx={{
'&.MuiInputLabel-shrink':{
color:'red'
}
}}
>
Bloques Aerial
</InputLabel>
I am creating a navigation menu and part of it is having a Login link and "Try for Free" button on the right part of the webpage. But what is puzzling me is how to get the button aligned to the right of the Login link. Currently it looks like this:
What am I doing wrong?
<Grid item xs={4}>
{/* <Toolbar disableGutters> */}
<Tabs className={classes.tabContainer}>
<Tab className={classes.tab} component={Link} to="/analyze" label="Login" />
</Tabs>
{/* <Typography className={classes.root}>
<Link href="#" onClick={menuOptions}>
Link
</Link>
</Typography> */}
<Button
variant="contained"
color="default"
size="medium"
// style={{ marginTop: '1.1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
// handleClickImportPGN();
}}
>
Try for Free
</Button>
{/* </Toolbar> */}
</Grid>;
One of the handiest ways is to use CSS Flexbox
<Grid item style={{ display: "flex" }}>
<Tabs>
<Tab component={Link} label="Login" />
</Tabs>
<Button
variant="contained"
color="default"
size="medium"
// style={{ marginTop: '1.1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
// handleClickImportPGN();
}}
>
Try for Free
</Button>
{/* </Toolbar> */}
</Grid>;
But if you want to make use more of Material UI, you could try to have a few more Grid within each of the children elements.
Simplified Working Example:
I can't get the value of the field wrapped into the react-hook-form <Controller /> in the onSubmit function. What is missing?
the other field works correctly
const onSubmit = async (data,e) => {
console.log("DATA" , data)
//data.groups is always undefined
...
}
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="groups"
control={control}
as={() => (
<Autocomplete multiple options={fbGroupsData.Group} getOptionLabel={option => option.name} renderInput={(params) =>(<TextField {...params} variant="outlined" label="Groups" placeholder="Groups" />)}/>
)}
/>
<TextField fullWidth inputRef={register} InputLabelProps={{ shrink: true }} name="name" label="Name" variant="outlined" />
</form>
There is an example in the doc: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r which was recommended to use render prop instead of as:
<Controller
render={(props) => (
<Autocomplete
{...props}
options={countries}
getOptionLabel={(option) => option.label}
renderOption={(option) => (
<span>
{countryToFlag(option.code)}
{option.label}
</span>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
variant="outlined"
/>
)}
onChange={(_, data) => props.onChange(data)}
/>
)}
name="country"
control={control}
/>
I have a two column layout, left is a pie chart, right is a form where you can change values and if satisfied save the configuration. Instead of my current code, which only let the pie chart present the saved state, I want it to be updated as soon as the form is changed. How can I do so?
<Row>
<Col md={12} lg={12}>
<ChartPie portfolio={portfolio} />
</Col>
<Col md={12} lg={12}>
<Form form={form} initialValues={portfolio} onFinish={onFinish}>
<Form.List name="stocks">
{(entries, { add, remove, move }) => (
<AllocationTable
form={form}
data={entries}
add={add}
remove={remove}
move={move}
/>
)}
</Form.List>
<br />
<Row justify="end">
<Form.Item>
<Button type="default" onClick={onReset}>
Reset
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }}>
Submit
</Button>
</Form.Item>
</Row>
</Form>
</Col>
</Row>
I am new to Material UI and am trying to use V1. Is there Select Field in V1. I can't find it. Is it replaced by something else?
Thanks
As of material V1.2 :
import Select from '#material-ui/core/Select';
...
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: 'age',
id: 'age-simple',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
The SelectField component in Material UI v1 is currently work in progress.
You can see the current progress here.
I recently ported some projects to Material UI v1 and replaced select fields with radio buttons.
Edit
Since v1.0.0-beta.9 the Selectcomponent is available.
Example usage:
<Select
value={this.state.value}
onChange={(e) => this.setState({ value : event.target.value}) }
input={<Input name="select" id="select-simple" />}
>
<MenuItem value={0}>
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>