Search code examples
javascriptreactjsmaterial-uiswitch-component

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


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')}
/>

Solution

  • 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')}
    />