How can I solve the overlap issue in InputLabel and OutlinedInput in Material UI?
codesandbox
<FormControl>
<InputLabel htmlFor="my-input">Email address</InputLabel>
<OutlinedInput id="my-input" aria-describedby="my-helper-text" />
<FormHelperText id="my-helper-text">
We'll never share your email.
</FormHelperText>
</FormControl>
<hr />
<br />
<FormControl>
<InputLabel shrink={true} htmlFor="my-input">
Email address
</InputLabel>
<OutlinedInput id="my-input" aria-describedby="my-helper-text" />
<FormHelperText id="my-helper-text">
We'll never share your email.
</FormHelperText>
</FormControl>
Result:
I tried the shrink={true} but it's not working.
You have to add "label" attribute in OutlinedInput tag.
<OutlinedInput id="my-input" aria-describedby="my-helper-text" label="Email address"/>
Related
I am using react material ui library
https://material-ui.com/components/checkboxes/
I need to have form group with checkbox and input type search inside. So i use the two components
from this library
<FormControl id="inline-form-group">
<FormLabel component="legend">Choose Columns:</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleCheckboxesChange} name="gilad" />}
label="Gilad Gray"
/>
</FormGroup>
<FormGroup>
<TextField id="standard-search" label="Column value" type="search" />
</FormGroup>
</FormControl>
but now textfield is under the checkbox
I want to have them inline.
I can't find in their documentation option like this
In the label position of your FormControlLabel you could put in your TextField.
This would work if you don't need to have the Gilad Gray as your curretn label.
<FormControlLabel
control={<Checkbox checked={true} onChange={handleChange} name="jason" />}
label={<TextField />}
/>
```
I am creating a modal to filter for profiles, on react-bootstrap and redux.
I need to filter to remember it's previous selection every time the user reopen it, even if he returns from another page. It works fine with value based components, such as "range slider" or "text search" because I can grab the previous saved redux store and plug into the component's attribute, such as:
value={rangeValue}
But for radio buttons, I am not sure since the attribute itself, "checked", is its own value.
<Form.Check
inline
label="male"
name="male"
checked <-----------
onChange={(e) => onRadioChange(e)}
/>
I want it to show "checked" only if the user has previously done so. I already have the user choice (whether checked or not) saved in my store, but don't know how to plug it in conditionally.
The returned JSX below
import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
...
<Form>
<div className="form_content_wrap">
<Form.Group>
<Form.Label htmlFor="formControlRange">Age: {rangeValue}</Form.Label>
<Form.Control
type="range"
className="form-control-range"
id="formControlRange"
min="0"
max="100"
value={rangeValue}
onChange={(e) => setRangeValue(e.currentTarget.value)}
/>
</Form.Group>
<Form.Group>
<Form.Label htmlFor="formControlRange">Gender: </Form.Label>
<Form.Check
inline
label="female"
name="female"
onChange={(e) => onRadioChange(e)}
/>
<Form.Check
inline
label="male"
name="male"
checked <<<------- THIS IS WHERE I WANT TO CHANGE
onChange={(e) => onRadioChange(e)}
/>
</Form.Group>
<Form.Group>
<Form.Label>Keyword</Form.Label>
<Form.Control
type="text"
placeholder="search description"
value={descValue}
onChange={(e) => setDescValue(e.currentTarget.value)}
/>
</Form.Group>
<Button
variant="primary"
type="submit"
onClick={onFormSubmit}
style={{ marginRight: "10px" }}
>
Submit
</Button>
<Button variant="primary" type="submit" onClick={onFormClear}>
Clear
</Button>[enter image description here][1]
</div>
</Form>
Thanks
React appears to be smart enough automatically remove the attribute if you set it equal to a Javascript expression that is not truthy. You should be able to just pull this state from your store. See this question for more details.
<Form.Check checked={true} />
<Form.Check checked={false} />
I have tried a couple of ways in order to make the material UI's autocomplete field of type required but I am not getting the behavior that I wanted. I had encapsulated my field inside react hook form <Controller/> yet no luck. I want to trigger message 'Field is mandatory' on submit when nothing is added to the field.
Below is the code snippet, I have not removed comments so that it becomes a bit easier for others to understand the approach that I had followed earlier -
<Controller
name="displayName"
as={
<Autocomplete
value={lists}
multiple
fullWidth
size="small"
limitTags={1}
id="multiple-limit-lists"
options={moduleList}
getOptionLabel={(option) => option.displayName}
renderInput={(params,props) => {
return (
<div>
<div className="container">
<TextValidator {...params} variant="outlined" label="Display Name*" className="Display Text"
name="displayName" id="outlined-multiline-static"
placeholder="Enter Display-Name" size="small"
onChange={handleDisplay}
// validators={['required']} this and below line does throw a validation but the problem is this validation stays on the screen when user selects something in the autocomplete field which is wrong.
// errorMessages={['This field is required']}
// withRequiredValidator
/>
</div>
</div>
)
}}
/>
}
// onChange={handleDisplay}
control={control}
rules={{ required: true }}
// required
// defaultValue={options[0]}
/>
<ErrorMessage errors={errors} name="displayName" message="This is required" />
You can use the following logic to get it worked. Though this might not be the best solution but works.
<Autocomplete
renderInput={(params) => (
<TextField
{...params}
label={value.length === 0 ? title : title + " *"} //handle required mark(*) on label
required={value.length === 0}
/>
)}
/>
I tried using the built in required in textfield for autocomplete, and it works like a charm. Maybe you can use this as a reference.
<Autocomplete
renderInput={(params) => {
<TextField {...params} required />
}
// Other codes
/>
Since you are rendering <TextValidator>, you should apply mandatory(required) attribute to that component not on <AutomComplete>.
Try this if your Material UI version is v5
<TextField
{...params}
required
label="Tags"
value={value}
InputProps={{
...params.InputProps,
required: value.length === 0,
}}
/>
I'm having a hard time with this select. Looks like there might be a bug with the displayEmpty prop. I've tried the following, but the label always covers the input when the value === ""
<FormControl>
<InputLabel htmlFor="profile-select">Profile</InputLabel>
<Select
value={values.accessProfile}
onChange={handleChange("accessProfile")}
input={<Input id="profile-select" />}
displayEmpty
>
<MenuItem value={""}>None</MenuItem>
{profiles.map(profile => (
<MenuItem value={profile.id}>{profile.name}</MenuItem>
))}
</Select>
</FormControl>
You need to set the shrink property on the InputLabel component to true https://material-ui.com/api/input-label/
I'm to react and I'm getting this error when setting up my drop down list
<FormGroup className="form-group">
<label htmlFor="services_dropdown">Service</label>
<FormControl
id="services_dropdown"
componentClass="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}>
{serviceDropDown}
</FormControl>
</FormGroup>
<FormGroup>
<label htmlFor="tarifications_dropdown">Tarification</label>
<FormControl
id="tarifications_dropdown"
componentClass="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}>
{usersDropDown}
</FormControl>
</FormGroup >
The error is giving me a hard time and this is it:
nput is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
usersDropDown and servicesDropDown return a list mapped from a list in state
FormControl defaults to input when as property is not specified.
To use it as a select, you have to provide:
<FormControl
id="tarifications_dropdown"
componentClass="select"
as="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}
>
{usersDropDown}
</FormControl>
Form.Control API in docs