How can i reset a Select field?

[gmcamposano]

I currently have:

const formRef = useRef<HTMLFormElement>(null)

  const { toast } = useToast()
  async function action(data: FormData) {
    console.log('working...')
    formRef?.current?.reset()
  }

<form action={action} ref={formRef}>
 <Select name="forma_de_pago">
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Selecciona la forma de pago" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="efectivo">Efectivo</SelectItem>
                <SelectItem value="tarjeta">Tarjeta de crédito</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
</form>

How can i make the select form reset back to the placeholder text?

[schmoli]

I did this by adding a button at the end of the list, making sure to change the key assigned to the select so that when I change the value I can force it to re render... here's a simple example:

export const SelectDemo = () => {
  const [key, setKey] = React.useState(+new Date())
  const [value, setValue] = React.useState<string | undefined>(undefined)
  return (
    <>
      <Select key={key} value={value}>
        <SelectTrigger>
          <SelectValue placeholder="Select a Theme" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel className="-ml-2 text-xs">Category 1</SelectLabel>
            <SelectItem value="light">Light</SelectItem>
            <SelectItem value="dark">Dark</SelectItem>
            <SelectItem value="system">System</SelectItem>
          </SelectGroup>
          <SelectGroup>
            <SelectLabel className="-ml-2 text-xs">Category 2</SelectLabel>
            <SelectItem value="cobalt2">Cobalt2</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <Button
            className="w-full px-2"
            variant="secondary"
            size="sm"
            onClick={(e) => {
              e.stopPropagation()
              setValue(undefined)
              setKey(+new Date())
            }}
          >
            Clear
          </Button>
        </SelectContent>
      </Select>
    </>
  )
}

[Raul-digimob]

This is indeed a way, but adding a single Clear button to every single one it's troublesome, wish there was a way to create an "Clear Selection" SelectItem that does not complain about an empty string value, so it resets

[anis-dr]

@Raul-digimob that would be awesome

[AroyewonTemitope]

Works like magic.

[space-symbol]

or done with value={value || ""} in Select

[arrayoutofbounds]

Saved so much time @space-symbol !

[Abhishek21k]

check this snippet added a 'x' icon for clearing, used the same approach as the above ans.

<div className="relative w-full max-w-xs">
                  <Select
                    value={selected}
                    onValueChange={(value) => {
                      setSelected(value);
                    }}
                  >
                    <SelectTrigger className="flex justify-between pr-8">
                      <SelectValue placeholder="Select Something" />
                    </SelectTrigger>
                    <SelectContent>
                      {/* ....add content */}
                    </SelectContent>
                  </Select>
                  {selected && (
                    <button
                      onClick={() => {
                        setSelected("");
                      }}
                      className="absolute right-14 top-1/2 -translate-y-1/2 rounded-sm p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                    >
                      <X className="h-4 w-4" />
                    </button>
                  )}
                </div>

[coderlzw-cn]

Reset Select by passing an onReset method

const SelectTrigger = React.forwardRef<
    React.ElementRef<typeof SelectPrimitive.Trigger>,
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { onReset?: () => void }
>(({className, children, onReset, ...props}, ref) => (
    <div
        className={cn(
            "relative z-0 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
            className
        )}
    >
        <SelectPrimitive.Trigger
            ref={ref}
            className={cn("w-full text-left pl-3 pr-10 py-2 truncate")}
            {...props}
        >
            <span className="w-full pr-2 truncate">{children}</span>
        </SelectPrimitive.Trigger>
        <SelectPrimitive.Icon className={cn(`absolute right-2 cursor-pointer`, !props.value && "pointer-events-none")}>
            {props.value ? <CircleXIcon className="h-4 w-4 opacity-50" onClick={onReset}/> : <ChevronDown className="h-4 w-4 opacity-50 "/>}
        </SelectPrimitive.Icon>
    </div>
))

[Thanhthien94]

Reset Select by passing an onReset method

const SelectTrigger = React.forwardRef<
    React.ElementRef<typeof SelectPrimitive.Trigger>,
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { onReset?: () => void }
>(({className, children, onReset, ...props}, ref) => (
    <div
        className={cn(
            "relative z-0 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
            className
        )}
    >
        <SelectPrimitive.Trigger
            ref={ref}
            className={cn("w-full text-left pl-3 pr-10 py-2 truncate")}
            {...props}
        >
            <span className="w-full pr-2 truncate">{children}</span>
        </SelectPrimitive.Trigger>
        <SelectPrimitive.Icon className={cn(`absolute right-2 cursor-pointer`, !props.value && "pointer-events-none")}>
            {props.value ? <CircleXIcon className="h-4 w-4 opacity-50" onClick={onReset}/> : <ChevronDown className="h-4 w-4 opacity-50 "/>}
        </SelectPrimitive.Icon>
    </div>
))

Good job bro, tks!

[cchin25]

Tried this, but the props.value doesn't ever seem to get a value so the X is never displayed? Can you post a snippet of using it?

Tried it with the form example:

<FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a verified email to display" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="[email protected]">[email protected]</SelectItem>
                  <SelectItem value="[email protected]">[email protected]</SelectItem>
                  <SelectItem value="[email protected]">[email protected]</SelectItem>
                </SelectContent>
              </Select>
              <FormDescription>
                You can manage email addresses in your{" "}
                <Link href="/examples/forms">email settings</Link>.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

[wan-mureithi]

@cchin25 passing the value in the SelectTrigger worked for me
<SelectTrigger value={field.value}> <SelectValue placeholder="Select a verified email to display" /> </SelectTrigger>
However the the x onclick doesn't work. It just opens the menu, might you have a suggestion
@Thanhthien94? Thanks

[coderlzw-cn]

@cchin25 This is a complete example, with separate select examples and form examples.

const SelectTrigger = React.forwardRef<
    React.ElementRef<typeof SelectPrimitive.Trigger>,
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { onReset?: () => void }
>(({className, children, onReset, ...props}, ref) => {
    return (
        <div
            className={cn(
                "relative z-0 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
                className
            )}
        >
            <SelectPrimitive.Trigger
                ref={ref}
                className={cn("w-full text-left pl-3 pr-10 py-2 truncate")}
                {...props}
            >
                <span className={cn(`w-full pr-2 truncate`, !props.value && "text-neutral-400")}>{children}</span>
            </SelectPrimitive.Trigger>
            <SelectPrimitive.Icon className={cn(`absolute right-2 cursor-pointer`, !props.value && "pointer-events-none")}>
                {props.value ? <CircleXIcon className="h-4 w-4 opacity-50" onClick={onReset}/> : <ChevronDown className="h-4 w-4 opacity-50 "/>}
            </SelectPrimitive.Icon>
        </div>
    )
})

import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
import {useState} from "react";
import {zodResolver} from "@hookform/resolvers/zod"
import {useForm} from "react-hook-form"
import {z} from "zod"

import {Button} from "@/components/ui/button"
import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form"

const FormSchema = z.object({
    email: z.string({required_error: "Please select an email to display.",}).nonempty().email(),
})

function App() {
    const [theme, setTheme] = useState<string>("")

    const form = useForm<z.infer<typeof FormSchema>>({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            email: ""
        }
    })

    function onSubmit(data: z.infer<typeof FormSchema>) {
        console.log("Form Data-->", data)
    }

    return (
        <div className="flex gap-x-8">
            <div className="">
                <Select value={theme} onValueChange={setTheme}>
                    <SelectTrigger asChild className="w-[280px]" value={theme} onReset={() => setTheme("")}>
                        <SelectValue placeholder="Place Select Theme" defaultValue={theme}/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="light">Light</SelectItem>
                        <SelectItem value="dark">Dark</SelectItem>
                        <SelectItem value="system">System</SelectItem>
                    </SelectContent>
                </Select>
                <Button onClick={() => console.log("theme-->", theme)}>Theme</Button>
            </div>

            <div>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="w-[400px] space-y-6">
                        <FormField
                            control={form.control}
                            name="email"
                            render={({field}) => (
                                <FormItem>
                                    <FormLabel>Email</FormLabel>
                                    <Select onValueChange={field.onChange} value={field.value}>
                                        <FormControl>
                                            <SelectTrigger value={field.value} onReset={() => form.resetField("email")}>
                                                <SelectValue placeholder="Select a verified email to display"/>
                                            </SelectTrigger>
                                        </FormControl>
                                        <SelectContent>
                                            <SelectItem value="[email protected]">[email protected]</SelectItem>
                                            <SelectItem value="[email protected]">[email protected]</SelectItem>
                                            <SelectItem value="[email protected]">[email protected]</SelectItem>
                                        </SelectContent>
                                    </Select>
                                    <FormMessage/>
                                </FormItem>
                            )}
                        />
                        <div className="space-x-2">
                            <Button type='button' variant="destructive" onClick={() => form.reset()}>Reset</Button>
                            <Button type="submit">Submit</Button>
                        </div>
                    </form>
                </Form>
            </div>
        </div>
    )
}

export default App

Kapture.2025-01-19.at.16.42.33.mp4

@wan-mureithi When there is a value, the element mouse event needs to be ignored

[bonesoul]

Implemented the functionality using a selectitem.

export default function CategorySelect({
  categories,
  onCategoriesChange,
}: {
  categories: FundCategory[];
  onCategoriesChange: (categories: number[]) => void;
}) {
  const [value, setValue] = useState<string | undefined>(undefined)

  const onValueChange = (value: string) => {
    if (value !== "All") {
      CategoryFilter.active = true; // activate the filter.
      var id = parseInt(value); // get the id of the selected category.
      onCategoriesChange([id]); // call the onCategoriesChange function.
    } else {
      setValue(""); // set the value to empty string so that the select shows the placeholder.
      CategoryFilter.active = false; // disable the filter.
      onCategoriesChange([]); // call the onCategoriesChange function.
    }
  }

  return (
    <Select
      value={value} onValueChange={onValueChange}>
      <SelectTrigger className="w-[280px] bg-gray-700 border-gray-600 focus:ring-gray-700 focus:ring-offset-0 rounded-sm">
        <SelectValue placeholder="Kategori" />
      </SelectTrigger>
      <SelectContent className="border-gray-700 bg-gray-800">
        <SelectItem
          key={0}
          value={"All"}
          className="hover:bg-gray-700 focus:bg-gray-700 bg-gray-800"
        >
          <MenuIcon className="size-5" />
          <span className="ml-2">All</span>
        </SelectItem>
        {categories.map((category) => (
          <SelectItem
            className="hover:bg-gray-700 focus:bg-gray-700 bg-gray-800"
            key={category.id}
            value={category.id.toString()}
          >
            <CategoryIcon category={category.name} className="size-5" />
            <span className="ml-2">{category.name}</span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

[jeancarlosdanese]

Uma contribuição, gostei dessa alternativa...

{/* Filtro de Fruits */}
<Select
value={filters.fruit}
onValueChange={(value: string) => {
value = value === "none" ? "" : value;
setFilters({ ...filters, gender: value });
}}

Banana Maça Outro Limpar

[Detayoo]

if you are lazy like me and need a short fix, try adding a SelectItem to be " " (an empty space, not string).
then, while passing out onValueChange, trim the value, rolling you back to what you'd have had by default.
this saves you the stress of having to go file to file, fixing your inputs or even unselecting items (literally) in an attempt to clear a field.
let me know if it works for you.

export const SelectField = ({
  placeholder,
  divClass,
  value,
  error,
  label,
  onChange,
  isRequired,
  children,
  hideLabel,
  bgColor,
}: SelectProps) => {
  return (
    <div className={`${divClass}`}>
      <div className="flex gap-x-2 items-center mb-2">
        <label className={`text-sm ${hideLabel && "opacity-0"}`}>
          {label}
          {isRequired && <sup className="text-red-500">*</sup>}
        </label>
      </div>

      <Select onValueChange={(value) => onChange(value.trim())} value={value}>
        <SelectTrigger
          className={`w-full min-h-12 rounded-[5px] border ${
            error ? "border-red-500" : "border-transparent"
          } ${bgColor ?? "bg-white"}`}
        >
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent className="w-full">
          <SelectGroup>
            <SelectItem value=" ">{placeholder}</SelectItem>
            {children}
          </SelectGroup>
        </SelectContent>
      </Select>

      {error && <p className="text-[12px] text-red-500 mt-[2px]">{error}</p>}
    </div>
  );
};

[jmayergit]

I uncovered an interesting but descriptive error from the component which led be to the following solution

Use a select component as you normally would with the following changes to achieve an intuitive UI

• Add a conditionally displayed option, which will serve as our reset option.
  • Its value should be something like "reset", but it cannot be an empty string; otherwise, you’ll get the descriptive error I mentioned above.
  • Display it conditionally only if the current value is not the default empty string, for a cleaner UI.
• In the select component’s change handler, check if the value is "reset". If so, manually set the value to an empty string; otherwise, set the value as usual.

<FormField
  control={control}
  name="..."
  render={({ field }) => {
    const onValueChange = (value: string): void => {
      field.onChange(value === "reset" ? "" : value);
    };

    return (
      <Select
        onValueChange={onValueChange}
        value={field.value}
      >
        <SelectTrigger>
          <SelectValue placeholder="your placeholder" />
        </SelectTrigger>
        <SelectContent>
          {field.value !== "" && (
            <SelectItem value="reset">your placeholder</SelectItem>
          )}
          {options.map((item) => (
            <SelectItem
              key={item.value}
              value={item.value}
            >
              {item.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }}
/>