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 />}
/>
```
Related
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"/>
I am using Launch Darkley for feature flagging in my ReactJS WebApp.
I am trying to hide the Radio Button below with the following code but it is not working as expected - is there something I am missing?
<RadioGroup className={styles.radioRoleContainer} aria-label="Select role for searching" name="roles" value={role} onChange={handleRoleChange}>
<FormControlLabel value={customer} control={<Radio id="Customer" color="default" />} label="As a Customer" />
{!flags.showEmployee && <FormControlLabel value={employee} control={<Radio id="Employee" color="default" />} label="As an Employee" />}
<FormControlLabel value={admin} control={<Radio id="Admin" color="default" />} label="As an Administrator" />
</RadioGroup>
I am trying to either show or hide the Employee Radio Button based on the Flag value in Launch Darkley
I have a checkbox and want it to be checked and disabled when the value from api is true.
It is disabling the checkbox correctly but the box is not checked. What am I doing wrong?
When I remove the 'disabled' property the checkbox is checked.
<FormControlLabel
control={<Checkbox
checked={apiValues.isTrue}
onChange={handleFormChange}
name="isTrue"
disabled={apiValues.isTrue}
color="secondary"
/>}
label="My Value"
/>
api looks like:
{
isTrue: True
}
replace with
disabled={!apiValues.isTrue}
so it becomes
<FormControlLabel
control={<Checkbox
checked={apiValues.isTrue}
onChange={handleFormChange}
name="isTrue"
disabled={!apiValues.isTrue}
color="secondary"
/>}
label="My Value"
/>
Logical Not operator
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 am implementing an input form and I am hoping that it could have a fix line limit. For example, for one box, it would be a 3-line input box. If more than 3 lines, there will be ideally a scroll bar on y-axis (i.e., no overflow in x axis). My current code is
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>
but it only rendered one line's input.
Edited: using textarea, the font seems to be very tiny.
The following snippet fixes the described issue:
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows="3" />
</Form.Group>
The componentClass prop of a FormControl is "input" by default, which renders a text input.
A text input is single line.
So try setting the componentClass prop of FormControl to "textarea":
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl componentClass="textarea" value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>