Text Box

Text Box

Overview

The TextBox component is a React component designed to create text input fields, including single-line inputs and multiline textareas. It's versatile and customizable, suitable for various forms and user input scenarios. The component also includes audio feedback for interactions and supports different sizes and disabled states.

Installation

To use the TextBox component in your React project, import it as follows:

const { TextBox } = window.$_gooee.framework;

Usage

The TextBox component can be used for both single-line text inputs and multiline textareas, based on the rows prop. It's designed to handle user inputs in forms or other interactive UI components.

Props

The TextBox component accepts the following props:

• className: Additional CSS class names to apply to the textbox.
• style: CSS styles to apply to the textbox.
• text: The initial text value of the textbox.
• onChange: Function to be called when the text value changes. It receives the new value as an argument.
• type: Specifies the type of input (e.g., "text", "password"). Defaults to "text".
• size: Adjusts the size of the textbox. Accepts standard size keywords.
• disabled: If true, disables the textbox.
• rows: Determines the number of rows for the textbox, converting it into a textarea for multiline input.

Functionalities

• State Management: Manages its text value internally and syncs with the text prop.
• Custom Styling: Can be styled via CSS classes and inline styles.
• Audio Feedback: Provides audio feedback on hover interactions using the engine.trigger method.
• Adaptive Input Type: Renders as a single-line input or a multiline textarea based on the rows prop.

Styling

The component uses the form-control class as its base, which can be extended or overridden with additional classes passed through the className prop. The sizeClass provides size-specific styling, and the input-disabled class is used for disabled states.

Example

Basic TextBox

<TextBox
    text="Initial text"
    onChange={(newText) => console.log(newText)}
/>

Multiline TextBox

<TextBox
    text="Multiline text"
    onChange={(newText) => console.log(newText)}
    rows={4}
/>

Custom Styled TextBox

<TextBox
    className="custom-textbox"
    style={{ backgroundColor: 'lightblue' }}
    text="Styled text"
    onChange={(newText) => console.log(newText)}
    size="lg"
/>

Contributing

Contributions to improve the TextBox component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.