Getting Started with React Development with the React Suite Library — Radio Buttons and Text Inputs

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.

Radio Buttons

We can add radio button groups with React Suite’s Radio and RadioGroup components.

For instance, we can write:

import React from "react";
import { Radio } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

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

The checked prop lets us make the radio button selected.

The disabled prop disables the radio button.

We can add radio button groups with the RadioGroup component.

For instance, we can write:

import React from "react";
import { Radio, RadioGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList">
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

to add 4 radio buttons into one group.

The inline prop makes the radio buttons inline:

import React from "react";
import { Radio, RadioGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList" inline>
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

We can set the default selected value with the defaultValue prop:

import React from "react";
import { Radio, RadioGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList" inline appearance="picker" defaultValue="A">
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

appearance changes the appearance of the radio buttons.

'picker' turns them into buttons.

Text Input

We can add a text input into our app with the Input and InputGroup components.

For instance, we can write:

import React from "react";
import { Input } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Input placeholder="Input" />
    </div>
  );
}

We set the placeholder prop to show the placeholder.

To add an input with an icon at the end, we write:

import React from "react";
import { Input, InputGroup, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <InputGroup inside>
        <Input placeholder="Input" />
        <InputGroup.Button>
          <Icon icon="search" />
        </InputGroup.Button>
      </InputGroup>
    </div>
  );
}

We add the InputGroup component to add the input group.

The inside prop lets us add content into our Input .

InputGroup.Button lets us add a button at the end of the input.

We have an Icon in the input, which will be rendered on the right side.

We can the size prop of the InputGroup to change the input size.

xs is extra small, sm is small, md is medium, and lg is large.

Conclusion

We can add an input field and radio button with components provided by React Suite.