React Development with the Shards React Library — Form Input and Radio Buttons

Shards React 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 Input

We can add a text input into our React app with Shards React’s FormInput component.

For instance, we can write:

import React from "react";
import { FormInput } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

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

to add it into our app.

placeholder has the input placeholder.

We can change the size with:

import React from "react";
import { FormInput } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <FormInput size="lg" placeholder="form input" />;
    </div>
  );
}

size has the form input size.

lg makes it big.

sm makes it small.

We can set valid and invalid to display a green border if it’s valid and a red border if it’s not.

For instance, we can write:

import React from "react";
import { FormInput } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <FormInput valid placeholder="form input" />;
    </div>
  );
}

to add it.

Radio Buttons

We can add radio buttons with the FormRadio component.

For instance, we can write:

import React, { useState } from "react";
import { FormRadio } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selectedFruit, setSelectedFruit] = useState();
  const changeFruit = (fruit) => {
    setSelectedFruit(fruit);
  };

  return (
    <div className="App">
      <FormRadio
        name="fruit"
        checked={selectedFruit === "orange"}
        onChange={() => {
          changeFruit("orange");
        }}
      >
        Orange
      </FormRadio>
      <FormRadio
        name="fruit"
        checked={selectedFruit === "lemon"}
        onChange={() => {
          changeFruit("lemon");
        }}
      >
        Lemon
      </FormRadio>
    </div>
  );
}

We have the changeFruit function which calls setSelectedFruit to change the selectedFruit state.

Then we add the boolean expression to set the radio button value to the checked prop.

If it returns true , then the radio button is selected.

We should set their name props to be the same so they’re identified as being in the same group.

We can make it inline with the inline prop:

import React, { useState } from "react";
import { FormRadio } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selectedFruit, setSelectedFruit] = useState();
  const changeFruit = (fruit) => {
    setSelectedFruit(fruit);
  };

  return (
    <div className="App">
      <FormRadio
        inline
        name="fruit"
        checked={selectedFruit === "orange"}
        onChange={() => {
          changeFruit("orange");
        }}
      >
        Orange
      </FormRadio>
      <FormRadio
        inline
        name="fruit"
        checked={selectedFruit === "lemon"}
        onChange={() => {
          changeFruit("lemon");
        }}
      >
        Lemon
      </FormRadio>
    </div>
  );
}

Conclusion

We can add form inputs and radio buttons into our React app with Shards React.