Combine Checkbox with Text Input in ReactJS: A Beginner's Guide (2026)

In this tutorial, we'll explore how to create a user interface component in ReactJS that combines a checkbox with a text input. This setup allows users to edit the text only when the checkbox is checked, providing a simple yet powerful way to manage user inputs. By the end of this guide, you'll learn how to build this component and render the checked inputs as a list or menu item outside the component.

Key Takeaways

• Create a controlled component in ReactJS that combines a checkbox with a text input.
• Enable text input editing only when the checkbox is checked.
• Render a list of checked text input values outside the component.
• Understand the use of React hooks for handling component state.

Prerequisites

• Basic understanding of ReactJS and JavaScript.
• Node.js and npm installed on your machine.
• React environment set up (create-react-app recommended).

Step 1: Set Up Your React Environment

To begin, ensure you have Node.js and npm installed. Create a new React app using Create React App:

npx create-react-app checkbox-text-input

Navigate into your project directory:

cd checkbox-text-input

Step 2: Create the Checkbox and Text Input Component

Inside the src folder, create a new file named CheckboxTextInput.js. This file will contain our component:

import React, { useState } from 'react';

function CheckboxTextInput({ onInputChange }) {
  const [isChecked, setIsChecked] = useState(false);
  const [textValue, setTextValue] = useState('');

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  const handleTextChange = (event) => {
    setTextValue(event.target.value);
    onInputChange(event.target.value);
  };

  return (
    
      
      
    
  );
}

export default CheckboxTextInput;

Step 3: Implement the Component in App.js

Open App.js and import the CheckboxTextInput component. We'll also manage the list of checked inputs here:

import React, { useState } from 'react';
import CheckboxTextInput from './CheckboxTextInput';

function App() {
  const [checkedInputs, setCheckedInputs] = useState([]);

  const handleInputChange = (text) => {
    // Update checkedInputs with the new value when the checkbox is checked
    setCheckedInputs((prev) => {
      if (prev.includes(text)) {
        return prev.filter((item) => item !== text);
      } else {
        return [...prev, text];
      }
    });
  };

  return (
    
      Checkbox with Text Input
      
      Checked Inputs
      
        {checkedInputs.map((input, index) => (
          {input}
        ))}
      
    
  );
}

export default App;

This code will render your component and a list of the text inputs that are checked. Each time the input changes, the checked values update and display under "Checked Inputs."

Step 4: Style Your Component

While functionality is important, styling your component enhances user experience. Add some basic styles in the App.css file:

input[type="text"] {
  margin-left: 8px;
  padding: 4px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #f0f0f0;
  margin: 4px 0;
  padding: 8px;
  border-radius: 4px;
}

Common Errors/Troubleshooting

• Checkbox not toggling: Ensure the onChange event correctly updates the isChecked state.
• Text input not updating: Verify the onChange event for the text input updates the textValue state.
• Checked inputs not rendering: Check if the handleInputChange function correctly updates the checkedInputs array.

Frequently Asked Questions

How do I ensure the text input is disabled?

Use the disabled attribute of the input element, conditionally setting it based on the checkbox state.

What if I want multiple checkbox-text input pairs?

Create a separate component for each pair and manage their states independently within the parent component.

Can I use this in a class component?

Yes, convert the functional component logic to manage state using this.state and this.setState.

Frequently Asked Questions

How do I ensure the text input is disabled?

Use the disabled attribute of the input element, conditionally setting it based on the checkbox state.

What if I want multiple checkbox-text input pairs?

Create a separate component for each pair and manage their states independently within the parent component.

Can I use this in a class component?

Yes, convert the functional component logic to manage state using this.state and this.setState.