Getting Started with React Development with the React Suite Library — Forms and Checkboxes

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Form

We can add forms into our React app with components provided by React Suite.

For instance, we can write:

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  HelpBlock,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form>
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
          <HelpBlock>Required</HelpBlock>
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

The Form component renders into a form element.

FormGroup lets us group form control elements.

ControlLabel has the label.

FormControl has the form control.

We can render FormControl as various kinds of controls.

HelpBlock has the input hint.

ButtonToolbar lets us add a button toolbar.

ButtonGroup lets us add a button group.

componentClass lets us set the element to render the form control as.

We can set the layout to 'horizontal' to make the label and form control side by side:

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  HelpBlock,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form layout="horizontal">
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
          <HelpBlock>Required</HelpBlock>
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

We can also add inline layouts with layout set to 'inline' :

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form layout="inline">
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

Checkbox

We can add a checkbox with the Checkbox and CheckboxGroup components.

For instance, we can write:

import React from "react";
import { Checkbox } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Checkbox defaultChecked> Checked</Checkbox>
    </div>
  );
}

The defaultChecked prop will make it checked by default.

We can also make it disabled with the disabled prop.

And we can make it accept an indeterminate state with the indeterminate prop.

We can get the checked value from the onChange handler.

For instance, we can write:

import React, { useState } from "react";
import { Checkbox, CheckboxGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [value, setValue] = useState([]);
  const handleChange = (value) => {
    console.log(value);
    setValue(value);
  };

  return (
    <div className="App">
      <CheckboxGroup
        inline
        name="checkboxList"
        value={value}
        onChange={handleChange}
      >
        <Checkbox value="A">Item A</Checkbox>
        <Checkbox value="B">Item B</Checkbox>
        <Checkbox value="C">Item C</Checkbox>
        <Checkbox value="D">Item D</Checkbox>
      </CheckboxGroup>
    </div>
  );
}

to get the checked values from value array parameter.

We call setValue to set the checked value as the value of the value state.

Conclusion

We can add forms and checkboxes easily into our React app with React Suite.