Codux discriminated union

Input.tsx

import styles from './input.module.scss';
import classNames from 'classnames';

export type ValueType = 'boolean' | 'number' | 'string';

interface InputPropsBase {
    type: ValueType;
    className?: string;
    value?: unknown | null;
}

interface BooleanInputProps extends InputPropsBase {
    type : 'boolean';
    value?: boolean | null;
}

interface NumberInputProps extends InputPropsBase {
    type : 'number';
    value?: number | null;
}

interface StringInputProps extends InputPropsBase {
    type : 'string';
    value?: string | null;
}

export type InputProps = BooleanInputProps | NumberInputProps | StringInputProps;

/**
 * This component was generated using Codux's built-in Default new component template.
 * For details on how to create custom new component templates, see https://help.codux.com/kb/en/article/configuration-for-inputs-and-templates
 */
export const Input = ({ className, type, value }: InputProps) => {
    return <input className={classNames(styles.root, className)} type={type} value={type === 'boolean' ? undefined : type === 'string' ? 'text' : type} checked={type === 'boolean' ? value ?? undefined : undefined} />;
};