Function Option

components/dash-core-components/src/utils/optionRendering.tsx:70–139

({
    option,
    isSelected,
    onChange,
    optionClassName,
    optionStyle,
    inputType = 'checkbox',
    inputClassName,
    inputStyle,
    labelClassName,
    labelStyle,
    index,
    id,
})

}

export const Option: React.FC<OptionProps> = ({
    option,
    isSelected,
    onChange,
    optionClassName,
    optionStyle,
    inputType = 'checkbox',
    inputClassName,
    inputStyle,
    labelClassName,
    labelStyle,
    index,
    id,
}) => {
    const classNames = [
        'dash-options-list-option',
        isSelected ? 'selected' : '',
        optionClassName,
    ].filter(Boolean);

    const inputClassNames = [
        'dash-options-list-option-checkbox',
        inputClassName,
    ].filter(Boolean);

    const labelClassNames = [
        'dash-options-list-option-text',
        labelClassName,
    ].filter(Boolean);

    return (
        <label
            className={classNames.join(' ')}
            role="option"
            aria-selected={isSelected}
            style={optionStyle}
            data-option-index={index}
        >
            <span className="dash-options-list-option-wrapper">
                <input
                    type={inputType}
                    checked={isSelected}
                    name={id}
                    value={
                        typeof option.value === 'boolean'
                            ? `${option.value}`
                            : option.value
                    }
                    disabled={!!option.disabled}
                    onChange={() => onChange(option)}
                    onKeyUp={e => {
                        if (e.key === 'Enter') {
                            onChange(option);
                        }
                    }}
                    readOnly
                    className={inputClassNames.join(' ')}
                    style={inputStyle}