Shadcn select default value

Question

I use react with shadcn there is a code:

<div className={'mb-8'}>
      <Select>
        <SelectTrigger className="w-[300px] text-foreground">
          <SelectValue/>
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectItem value="apples">Apples</SelectItem>
            <SelectItem value="bananas">Bananas</SelectItem>
            <SelectItem value="mangos">Mangos</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>

How to make a default value to be selected when the component is rendered? For example I want apples to be selected?

Answer 1

Edit:

It's important to note that there are two ways to use the Select input: controlled and uncontrolled. This solution is for uncontrolled, meaning you don't have to manually store the Select's value. Bersan's answer shows a way to do it the controlled way. Here is a working example that shows both use cases.

---

Shadcn's Select component is built with Radix's Select Primitive. There is usually a link at the top of Shadcn's component docs that links to the props for the component. To set a default value on <Select>, add the defaultValue prop like this:

<Select defaultValue='apples'>
  ...
</Select>

You can find more details on the props here.