ToggleInput Component

The <ToggleInput> component provides a unified interface for creating various toggleable input elements like checkboxes, radio buttons, and switches.

Basic Usage

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used. This component can be used to render checkboxes, radio buttons, and switches by specifying the subcomponent.

note

The component does not have a parent element. That means you can use the component only like a subcomponent.

Checkbox

import { useState } from "react";
import { ToggleInput } from "react-better-html";

function App() {
   const [isChecked, setIsChecked] = useState(false);

   return (
      <ToggleInput.checkbox
         label="Remember me"
         checked={isChecked}
         onChange={setIsChecked}
      />
   );
}

Radio Button

import { Div, Text, useState } from "react";
import { ToggleInput } from "react-better-html";

function App() {
   const [selectedFruit, setSelectedFruit] = useState("apple");

   return (
      <Div>
         <Text marginBottom={10}>Select a fruit</Text>

         <ToggleInput.radiobutton
            text="Apple"
            value="apple"
            checked={selectedFruit === "apple"}
            onChange={(checked, value) => setSelectedFruit(value)}
         />
         <ToggleInput.radiobutton
            text="Banana"
            value="banana"
            checked={selectedFruit === "banana"}
            onChange={(checked, value) => setSelectedFruit(value)}
         />
      </Div>
   );
}

Switch

import { useState } from "react";
import { ToggleInput } from "react-better-html";

function App() {
   const [isSwitchOn, setIsSwitchOn] = useState(false);

   return (
      <ToggleInput.switch
         label="Enable Feature"
         checked={isSwitchOn}
         onChange={setIsSwitchOn}
      />
   );
}

Common Props

All standard <input> attributes are valid props for this component.