clear button on input

[alexander-densley]

pretty self explanatory, but it would be nice for a prop to exist to add a clear button for input fields

[grafficmedia]

yeah, this is built-in behavior for inputs. type="search" should have an X in the right side by default. Shadcn should not be removing default web behavior like this without a way to add it back.

[HichOoMa]

I think it should be added in the type="file" also

[softwarebyze]

there is a clear button if u add type="search"

the shadcn clear button in @geudrik's comment below (#3274 (comment)) looks much better though

[hsavit1]

how are people doing this now??

[geudrik]

it would be nice for a prop to exist to add a clear button for input fields
Since most inputs are controlled, this would be difficult to do I would think. You can use the code below though to get what you're after.

The button has an onClick handler that clears the state var (in this case, the global filter of the datatable), which in turn clears the input box.

The input box has an onChange handler to set it.

                <div className="relative w-full max-w-sm">
                    <Input
                        placeholder="Filter..."
                        value={globalFilter ?? ''}
                        onChange={(event) =>
                            // table.getColumn("email")?.setFilterValue(event.target.value)
                            setGlobalFilter(String(event.target.value))
                        }
                        className="max-w-sm"
                    />
                    <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
                        onClick={() => {
                            setGlobalFilter('')
                        }}
                    >
                        <XIcon className="h-4 w-4"/>
                        <span className="sr-only">Clear</span>
                    </Button>
                </div>