Checker

A variation of the Radio element.

The Checker component can be used in place of the HTML Radio element and it is a different variation of the Radio component.

To use the Checker component, it has to be imported just like every other component as shown in the example below.

// importing the Checker component.
import { Checker } from "@wigxel/react-components/lib/form";

When Checker is imported, it comes in two variations, dotted styled and flat styled. The Checker component also comes in the active (default state) and disabled state.

The dotted styled variation of the Checker component is the default.

<form>
    <Checker
      name="gender"
      style={Checker.Styles.Flat}
      label="Gender"
      buttons={["Male", "Female"]}
      onChange={(val) => {
        console.log(val);
      }}
    />
    <Checker
      name="vegetarian"
      style={Checker.Styles.Flat}
      label="Vegetarian"
      buttons={["Yes", "No"]}
      onClear
      onChange={(val) => {
        console.log(val);
      }}
    />
    <Checker
      disabled
      name="gender"
      style={Checker.Styles.Flat}
      label="Gender"
      buttons={["Male", "Female"]}
      onChange={(val) => {
        console.log(val);
      }}
    />
</form>

As seen above the Checker component accepts properties such as the disabled , style , label , buttons , name , canClear and onChange.

The disabled props accepts a value of true or false but has a default of true.

The style props has a fixed value of either Dot or Flat. This fixed style comes as the properties of an object (Checker.Styles) that is embedded with the Checker component.

The properties Dot and Flat are in sentence case.

The label props is an optional props and if is omitted, the label indicator disappears from the component. The buttons props accepts an array of strings which is used to create the options for the buttons and the name props accepts a string used to interact with the form.

The canClear accepts a boolean. If set to true, the user can reset their selection. The onChange props accepts a callback function.

The Checker components can also be used with react-hook-form as shown below.

import { useForm } from "react-hook-form";

export const Form = () => {
  const form = useForm({...});

  return(
    <form onSubmit={form.handleClick(...)}>
      <Checker
        name="vegetarian"
        style={Checker.Styles.Flat}
        label="Vegetarian"
        buttons={["Yes", "No"]}
        onChange={(val) => {
          console.log(val);
        }}
        ref={register}
      />
    </form>
  )
};