How to create asterisk in material-ui switch component lable?

49 Views Asked by At

I'm passing a required props has a property to enable asterisk symbol in label but it not working

<FormControlLabel
    control={
        <Switch
            onChange={event =>
                onChangeRow(
                    rowIndex,
                    'name',
                    event.target.checked === true ? 'Y' : 'N'
                )
            }
            disableRipple
            style={{ backgroundColor: 'transparent' }}
            checked={row.address.name === 'Y'}
            color='primary'
        />
    }
    labelPlacement='start'
    label={'Name?'}
    required={row.formDesc.name.is_mandatory === 'Y'}
    disabled={issubmited.value ? disabled : row.formDesc.name.is_editable === 'N'}
    error={hasError('name')}
    helpertext={getError('name')}
/>
1

There are 1 best solutions below

0
KARTHIKEYAN.A On BEST ANSWER

After I have dicidied to pass custom compoenent to the lable with condition to enable disable asterisk depends on requirement.

<FormControlLabel
    control={
        <Switch
            onChange={event =>
                onChangeRow(
                    rowIndex,
                    'name',
                    event.target.checked === true ? 'Y' : 'N'
                )
            }
            disableRipple
            style={{ backgroundColor: 'transparent' }}
            checked={row.address.name === 'Y'}
            color='primary'
        />
    }
    labelPlacement='start'
    label={<Typography>Name?{row.formDesc.name.is_mandatory === 'Y' && <span style={{color: 'red', fontSize: '18px'}}>*</span>}</Typography>}
    required={row.formDesc.name.is_mandatory === 'Y'}
    disabled={issubmited.value ? disabled : row.formDesc.name.is_editable === 'N'}
    error={hasError('name')}
    helpertext={getError('name')}
/>