KFAQS

Dynamic Input Controls

[]

A versatile React library providing a suite of dynamic input controls including radio buttons, checkboxes, dropdowns, multi-select dropdowns, and standard input fields. Enhance your forms with easy-to-use and customizable components.

Table of Contents

• Features
• Installation
• Usage
  • Dropdown Example
  • Radio Example
• API
  • Dropdown
  • Radio
• Customization
• Contributing
• License
• Questions or Feedback

Features

• Radio Button: Simple and effective for single choice inputs.
• Checkbox: Ideal for multiple selections.
• Dropdown: Compact way to display a list of options with multiple variants.
• Multi-Select Dropdown: Allows selection of multiple options.
• Input: Standard input field for text entries.

Installation

To use the package, install it via npm or yarn:

npm install kfaqs

yarn install kfaqs

Usage

const [name, setName] = useState("");
const handleChange = (field: string) => (value: string) => {
  setName(value);
};
<InputControl
  variant="lableOutline"
  type="text"
  label="Name"
  value={name}
  onChange={handleChange("text")}
  placeholder="Enter your name"
  required
  helpText="Please enter your full name."
  error="This field is required."
  className={"font-extrabold"}
/>;

API

Dropdown

A customizable dropdown component for selecting an option from a list.

Props:

• options: Array<{ label: string, value: string }> - The options available in the dropdown.
• onSelect: (option: Option) => void - Callback when an option is selected.
• variant: string - The styling variant of the dropdown. Options: "simple", "advance", "outlined", "rounded", "plain". Default: "simple".
• label: string - The label for the dropdown.
• value: string - The currently selected value.
• onChange: (value: string) => void - Callback when the value changes.
• placeholder: string - Placeholder text for the dropdown input. Default: "Select your country".
• required: boolean - Whether the field is required. Default: false.
• helpText: string - Helper text displayed below the input.
• error: string - Error message displayed when validation fails. Default: "This field is required".
• className: string - Additional class names for styling.

Radio

A simple and accessible radio button group for selecting a single option.

Props:

• label: string - The label for the radio group.
• name: string - The name attribute for the radio inputs.
• value: string - The currently selected value.
• onChange: (value: string) => void - Callback when the selected value changes.
• options: Array<{ label: string, value: string }> - The options for the radio buttons.
• required: boolean - Whether the field is required. Default: false.
• helpText: string - Helper text displayed below the input.
• error: string - Error message displayed when validation fails.
• className: string - Additional class names for styling.

Customization

Each component is designed to be easily customizable through props. You can also pass additional props to style and configure them according to your needs.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Questions or Feedback

If you have any questions or feedback, feel free to open an issue or contact me via email.