added feature: allowClear in input field

CHANGELOG.md

@@ -18,8 +18,53 @@ should change the heading of the (upcoming) version to include a major version b
 
 # 6.1.3
 
+## @rjsf/antd
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/chakra-ui
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/core
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/daisyui
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/fluent-ui
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/mantine
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/mui
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/primereact
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/react-bootstrap
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/semantic-ui
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
+## @rjsf/shadcn
+
+- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields
+
 ## @rjsf/utils
 
+- Fixed issue by adding new `allowClear` option to `UIOptionsBaseType` type, fixing [#4671](https://github.com/rjsf-team/react-jsonschema-form/issues/4671)
 - Fixed issue with default value not being prefilled when object with if/then is nested inside another object, fixing [#4222](https://github.com/rjsf-team/react-jsonschema-form/issues/4222)
 - Fixed issue with schema array with nested dependent fixed-length, fixing [#3754](https://github.com/rjsf-team/react-jsonschema-form/issues/3754)
 

packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -13,6 +13,7 @@ import {
 
 import { Field } from '../components/ui/field';
 import { getChakra } from '../utils';
+import { X } from 'lucide-react';
 
 export default function BaseInputTemplate<
   T = any,
@@ -72,6 +73,25 @@ export default function BaseInputTemplate<
         list={schema.examples ? examplesId(id) : undefined}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
+      {options.allowClear && !readonly && !disabled && value && (
+        <button
+          type='button'
+          onClick={() => onChange('')}
+          aria-label='Clear input'
+          style={{
+            backgroundColor: 'transparent',
+            cursor: 'pointer',
+            border: '2px solid #ccc',
+            position: 'absolute',
+            left: '97%',
+            transform: 'translateY(250%)',
+            zIndex: 1,
+            borderRadius: '50%',
+          }}
+        >
+          <X size={12} />
+        </button>
+      )}
       {Array.isArray(schema.examples) ? (
         <datalist id={examplesId(id)}>
           {(schema.examples as string[])

packages/core/src/components/templates/BaseInputTemplate.tsx

@@ -9,6 +9,8 @@ import {
   StrictRJSFSchema,
 } from '@rjsf/utils';
 
+import { X } from 'lucide-react';
+
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
  * It can be customized/overridden for other themes or individual implementations as needed.
@@ -91,6 +93,25 @@ export default function BaseInputTemplate<
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
+      {options.allowClear && !readonly && !disabled && inputValue && (
+        <button
+          type='button'
+          onClick={() => onChange('')}
+          aria-label='Clear input'
+          style={{
+            position: 'absolute',
+            left: '97%',
+            transform: 'translateY(-120%)',
+            backgroundColor: 'transparent',
+            cursor: 'pointer',
+            border: '2px solid #ccc',
+            zIndex: 1,
+            borderRadius: '50%',
+          }}
+        >
+          <X size={12} />
+        </button>
+      )}
       {Array.isArray(schema.examples) && (
         <datalist key={`datalist_${id}`} id={examplesId(id)}>
           {(schema.examples as string[])

packages/daisyui/src/templates/BaseInputTemplate/BaseInputTemplate.tsx

@@ -8,6 +8,7 @@ import {
   ariaDescribedByIds,
   examplesId,
 } from '@rjsf/utils';
+import { X } from 'lucide-react';
 
 /** The `BaseInputTemplate` component is a template for rendering basic input elements
  * with DaisyUI styling. It's used as the foundation for various input types in forms.
@@ -80,23 +81,45 @@ export default function BaseInputTemplate<
         <label htmlFor={id} className='label hidden' style={{ display: 'none' }}>
           <span className='label-text'>{label}</span>
         </label>
-        <input
-          id={id}
-          name={htmlName || id}
-          value={value || value === 0 ? value : ''}
-          placeholder={placeholder}
-          required={required}
-          disabled={disabled || readonly}
-          autoFocus={autofocus}
-          className={className}
-          multiple={isMulti}
-          {...rest}
-          {...htmlInputProps}
-          onChange={onChangeOverride || _onChange}
-          onBlur={_onBlur}
-          onFocus={_onFocus}
-          aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
-        />
+        <div style={{ position: 'relative' }}>
+          <input
+            id={id}
+            name={htmlName || id}
+            value={value || value === 0 ? value : ''}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled || readonly}
+            autoFocus={autofocus}
+            className={className}
+            multiple={isMulti}
+            {...rest}
+            {...htmlInputProps}
+            onChange={onChangeOverride || _onChange}
+            onBlur={_onBlur}
+            onFocus={_onFocus}
+            aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
+          />
+          {options.allowClear && !readonly && !disabled && value && (
+            <button
+              type='button'
+              onClick={() => onChange('')}
+              aria-label='Clear input'
+              style={{
+                backgroundColor: 'transparent',
+                cursor: 'pointer',
+                border: '2px solid #ccc',
+                position: 'absolute',
+                left: '97%',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 1,
+                borderRadius: '50%',
+              }}
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
       </div>
       {Array.isArray(schema.examples) && (
         <datalist id={examplesId(id)}>