TypeScript/React example

InputPassword.tsx

import {
    Component,
    EventHandler,
    FormEvent
} from 'react';

import { ElementProps, resolveClassNames } from '../../../helpers/bem';
import { Label } from '../../Form';

export default class InputPassword extends Component<
    InputPasswordProps,
    InputPasswordState
> {
    public render() {

        const {
            element,
            modifiers,
            helpMessage,
            helpAction,
            value,
            onChange,
            inputTabIndex,
            helpActionTabIndex,
        } = this.props;

        return resolveClassNames(
            <div {...{ element, modifiers }}>
                <Label
                    block="form-label"
                    modifiers="full-width"
                    label="Password"
                    {...{ helpMessage, helpAction }}
                    tabIndex={helpActionTabIndex}
                >
                    <input
                        element="input"
                        type="password"
                        name="password"
                        autoComplete="off"
                        {...{ value, onChange }}
                        tabIndex={inputTabIndex}
                    />
                </Label>
            </div>
        );
    }
}

interface InputPasswordProps extends ElementProps {
    helpMessage: string;
    helpAction?: Function;
    value?: string;
    onChange?: EventHandler<FormEvent>;
    helpActionTabIndex?: number;
    inputTabIndex?: number;
}

interface InputPasswordState {

}