ResettableTextInput

<ResettableTextInput> is a <TextInput> with a clear (×) button that resets the field value to an empty string.

Installation

pnpm dlx shadcn@latest add @shadmin/resettable-text-input

Usage

import { ResettableTextInput } from "@/components/admin";
 
<ResettableTextInput source="title" />;

A small ghost button is displayed on the right side of the input when the field has a value. Clicking it sets the field value back to "" and marks the field as dirty.

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Field name
`className`	Optional	`string`	-	Wrapper classes
`clearAlwaysVisible`	Optional	`boolean`	`false`	If true, show a clear button even when the field is empty (it will be disabled)
`defaultValue`	Optional	`string`	-	Default value
`disabled`	Optional	`boolean`	-	If true, the input is disabled
`format`	Optional	`function`	-	Callback taking the value from the form state, and returning the input value
`helperText`	Optional	`ReactNode`	-	Help text
`inputClassName`	Optional	`string`	-	Classes applied to the underlying `<input>` element
`label`	Optional	`string` \| `false`	Inferred	Custom / hide label
`parse`	Optional	`(value:string) => any`	-	Callback taking the value from the input, and returning the value to be stored in the form state
`placeholder`	Optional	`string`	-	Placeholder text
`resettable`	Optional	`boolean`	`true`	If false, no clear button is displayed
`validate`	Optional	`Validator` \| `Validator[]`	-	Validation

Additional props are forwarded to the underlying <TextInput> (and ultimately to the HTML <input>).

`resettable`

Set resettable to false to hide the clear button entirely. The component then behaves like a regular <TextInput>:

<ResettableTextInput source="title" resettable={false} />

`clearAlwaysVisible`

By default, the clear button is only shown when the field has a value. Set clearAlwaysVisible to true to render it permanently. The button will be disabled when the field is empty:

<ResettableTextInput source="title" clearAlwaysVisible />