UB
Unmoy Biswas

Styled Autocomplete - Copy this React, Mui Component to your project

<Autocomplete filterSelectedOptions freeSolo fullWidth popupIcon={ <svg width="12" height="12" viewBox="0 0 11 6" fill="none"> <path d="M10.854 0.854028L5.85403 5.85403C5.80759 5.90052 5.75245 5.9374 5.69175 5.96256C5.63105 5.98772 5.56599 6.00067 5.50028 6.00067C5.43457 6.00067 5.36951 5.98772 5.30881 5.96256C5.24811 5.9374 5.19296 5.90052 5.14653 5.85403L0.146528 0.854028C0.0527077 0.760208 0 0.63296 0 0.500278C0 0.367596 0.0527077 0.240348 0.146528 0.146528C0.240348 0.0527074 0.367596 0 0.500278 0C0.63296 0 0.760208 0.0527074 0.854028 0.146528L5.50028 4.7934L10.1465 0.146528C10.193 0.100073 10.2481 0.0632225 10.3088 0.0380812C10.3695 0.0129398 10.4346 0 10.5003 0C10.566 0 10.631 0.0129398 10.6917 0.0380812C10.7524 0.0632225 10.8076 0.100073 10.854 0.146528C10.9005 0.192983 10.9373 0.248133 10.9625 0.30883C10.9876 0.369526 11.0006 0.434581 11.0006 0.500278C11.0006 0.565975 10.9876 0.63103 10.9625 0.691726C10.9373 0.752423 10.9005 0.807573 10.854 0.854028Z" fill="#232526" /> </svg> } disableClearable={true} multiple id="tags standard" value={selectedDiagnose} options={diagnosesOptions} onInputChange={(e, newInputValue) => { setDiagnoseValue(newInputValue); }} getOptionLabel={(option) => option} // onChange={(e, newValue) => { // setSelectedDiagnose(newValue); // }} onChange={handleDiagnoseChange} renderInput={(params) => ( <TextField placeholder="Enter Diagnosis" {...params} variant="outlined" /> )} renderTags={(value, getTagProps) => ( <InputChip value={value} getTagProps={getTagProps} /> )} />

Prompt
Component Preview

About

StyledAutocomplete - A versatile, full-width input with freeSolo support, multiple selections, and custom tags, built with React and MU. Copy now for free!

Share

Last updated 1 month ago