# Text Input Modal Component A customizable modal component for entering key-value pairs, commonly used for form input. ## Example ```jsx State.init({ hidden: true, }); const handleOnConfirm = (key, value) => { console.log("Key: " + key); console.log("Value: " + value); State.update({ hidden: !hidden }); }; return ( <Widget src="alicolakk.near/widget/TextAreaModal" props={{ keyLabel="Your Key Label" keyPlaceholder="Your Key Placeholder" valueLabel="Your Value Label" valuePlaceholder="Your Value Placeholder" title="Your Title" confirmText="Your Confirm Text" hidden={hidden} onClose={() => State.update({ hidden: !hidden })} onConfirm={handleOnConfirm} }} /> ); ``` | Prop | Type | Default | Description | |---|---|---|---| | keyLabel | string | "Key" | The label for the key input field. | | keyPlaceholder | string | "Key" | The placeholder text for the key input field. | | valueLabel | string | "Value" | The label for the value input field. | | valuePlaceholder | string | "Value" | The placeholder text for the value input field. | | title | string | "Add Attribute" | The title of the modal. | | confirmText | string | "Save" | The text for the confirmation button. | | hidden | boolean | true | Controls whether the modal is hidden or visible. | | onClose | function | - | A callback function to be called when the modal is closed. | | onConfirm | function | - | A callback function to be called when the confirmation button is clicked. It receives the key and value entered by the user as arguments. | | ...otherProps | - | - | All other props not listed above will be forwarded to the underlying input elements. | **HTML Attributes** All other props not listed above will be forwarded to the input elements within the modal, such as type, value, and placeholder. You can use these to further customize the input fields as needed.