kfaqs

KFAQS

Dynamic Input Controls

![GitHub license]

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:

``bash
npm install kfaqs
`

`bash
yarn install kfaqs
`

$3

`javascript
const [name, setName] = useState("");
const handleChange = (field: string) => (value: string) => {
setName(value);
};
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"}
/>;
`

$3

#### 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.

$3

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.

$3

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

$3

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