Form Elements in React (Live Playground)

Form elements are a fundamental part of web applications, and React offers a flexible way to work with different types of form inputs. In this tutorial, we'll explore how to handle various form elements in React, including text inputs, textareas, checkboxes, and radio buttons, with sample code and simple explanations.

Text Inputs

Text inputs are the most common form element. In a controlled form, you can manage the text input's value using state:

JavaScript

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  const handleChange = event => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>Entered text: {text}</p>
    </div>
  );
}

export default TextInput;

In this example, the text input's value is managed by the text state variable, and the handleChange function updates the state when the user types.

Live Playground, Try it Yourself

Textareas

Textareas allow users to enter multi-line text. Just like text inputs, you can manage their value using state:

JavaScript

import React, { useState } from 'react';

function TextArea() {
  const [text, setText] = useState('');

  const handleChange = event => {
    setText(event.target.value);
  };

  return (
    <div>
      <textarea value={text} onChange={handleChange}></textarea>
      <p>Entered text: {text}</p>
    </div>
  );
}

export default TextArea;

In this example, the textarea's value is managed by the text state variable, and the handleChange function updates the state when the user types.

Live Playground, Try it Yourself

Checkboxes

Checkboxes allow users to select multiple options. To manage their state, use a boolean value or an array for multiple checkboxes:

JavaScript

import React, { useState } from 'react';

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = event => {
    setIsChecked(event.target.checked);
  };

  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={handleChange} />
      <p>Checked: {isChecked.toString()}</p>
    </div>
  );
}

export default Checkbox;

In this example, the checkbox's state is managed by the isChecked boolean variable, and the handleChange function updates the state based on the checked property.

Live Playground, Try it Yourself

Radio Buttons

Radio buttons allow users to select one option from a group. To manage their state, use a single state variable that represents the selected option:

JavaScript

import React, { useState } from 'react';

function RadioButtons() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleChange = event => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <input
        type="radio"
        name="option"
        value="option1"
        checked={selectedOption === 'option1'}
        onChange={handleChange}
      />
      Option 1
      <input
        type="radio"
        name="option"
        value="option2"
        checked={selectedOption === 'option2'}
        onChange={handleChange}
      />
      Option 2<p>Selected option: {selectedOption}</p>
    </div>
  );
}

export default RadioButtons;

In this example, the radio buttons share the same name attribute, ensuring that only one can be selected at a time. The selectedOption state variable represents the selected option, and the handleChange function updates the state based on the value property.

Live Playground, Try it Yourself

Conclusion

Understanding how to work with different form elements in React is crucial for building web applications. By learning how to handle text inputs, textareas, checkboxes, and radio buttons using state and event handlers, you'll be better prepared to create intuitive and accessible user interfaces in your React projects. With a solid grasp of form elements in React, you'll be well on your way to becoming an effective React developer.