React - pretty simple login form

3 points
Created by:

In this article, we would like to show you how to create a nicely styled simple login form in React.

Simple login user form in React.
Simple login user form in React.

The whole structure of the example consists of the Field component, which will serve as a reusable code, and the Form, which puts it all together.

In our case, the style property was used for styling.
To get the values entered by the user in the inputs, we used the useRef hook, with which we can easily obtain a handle to a DOM element and retrieve the current value.

Using these values, we build an object that we can then send to the server after handling onSubmit.
To prevent the page reloading when onSubmit event occurs, we explicitly called preventDefault() method.

By default, ref property is reserved by React, so we should use the forwardRef function.

Runnable example: 

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines in your pronect.

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

const appStyle = {
	height: '250px',
  	display: 'flex'

const formStyle = {
    margin: 'auto',
    padding: '10px',
    border: '1px solid #c9c9c9',
    borderRadius: '5px',
    background: '#f5f5f5',
    width: '220px',
  	display: 'block'

const labelStyle = {
    margin: '10px 0 5px 0',
    fontFamily: 'Arial, Helvetica, sans-serif',
    fontSize: '15px',

const inputStyle = {
    margin: '5px 0 10px 0',
    padding: '5px', 
    border: '1px solid #bfbfbf',
    borderRadius: '3px',
    boxSizing: 'border-box',
    width: '100%'

const submitStyle = {
    margin: '10px 0 0 0',
    padding: '7px 10px',
    border: '1px solid #efffff',
    borderRadius: '3px',
    background: '#3085d6',
    width: '100%', 
    fontSize: '15px',
    color: 'white',
    display: 'block'

const Field = React.forwardRef(({label, type}, ref) => {
    return (
        <label style={labelStyle} >{label}</label>
        <input ref={ref} type={type} style={inputStyle} />

const Form = ({onSubmit}) => {
    const usernameRef = React.useRef();
    const passwordRef = React.useRef();
    const handleSubmit = e => {
        const data = {
            username: usernameRef.current.value,
            password: passwordRef.current.value
    return (
      <form style={formStyle} onSubmit={handleSubmit} >
        <Field ref={usernameRef} label="Username:" type="text" />
        <Field ref={passwordRef} label="Password:" type="password" />
          <button style={submitStyle} type="submit">Submit</button>

// Usage example:

const App = () => {
    const handleSubmit = data => {
        const json = JSON.stringify(data, null, 4);
    return (
      <div style={appStyle}>
        <Form onSubmit={handleSubmit} />

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Related posts

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

React Forms

Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂