jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

React UI Components

  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Custom Elements
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

React UI Components

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxSortable
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxDockingLayout

jqxPasswordInput

  • Default Functionality
  • Custom Strength Rendering
  • Fluid Size
  • Right to Left Layout
Theme:
  • Demo
  • App.htm
  • App.js
ReactJS Password Input demo. jqxPasswordInput Fluid Size Example. The width of the PasswordInput in this demo is in Percentages.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title id="Description">
        ReactJS Password Input demo. jqxPasswordInput Fluid Size Example. The width of the PasswordInput in this demo is in Percentages.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom: 3em">
        ReactJS Password Input demo. jqxPasswordInput Fluid Size Example. The width of the PasswordInput in this demo is in Percentages.
    </div>
    <div id="app"></div>
    <script src="../build/passwordinput_fluidsize.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxPasswordInput from '../../../jqwidgets-react/react_jqxpasswordinput.js';

class App extends React.Component {
    render() {
        return (
            <JqxPasswordInput ref='passwordInput'
                width={'50%'} height={25}
                placeHolder={'Enter password:'}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2019. All Rights Reserved.