CODEWITHSUNDEEP
reactjstailwind-cssshadcnui
happy_cutman
happy_cutman

Reputation: 109

Shadcn select default value

I'm using React with Shadcn, here is the 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?

Upvotes: 6

Views: 17624

Answers (4)

Rico
Rico

Reputation: 2057

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.

Uncontrolled:

export default function ControlledSelect() {
    return (
        <Select defaultValue="apple">
            <SelectTrigger className="w-[300px] text-foreground">
                <SelectValue />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    <SelectItem value="apple">Apple</SelectItem>
                    <SelectItem value="banana">Banana</SelectItem>
                    <SelectItem value="blueberry">Blueberry</SelectItem>
                    <SelectItem value="grapes">Grapes</SelectItem>
                    <SelectItem value="pineapple">Pineapple</SelectItem>
               </SelectGroup>
           </SelectContent>
       </Select>
   );
}

Controlled:

export default function ControlledSelect() {
    const [selectedOption, setSelectedOption] = useState('apple');

    return (
        <Select
            value={selectedOption}
            onValueChange={(value) => {
                setSelectedOption(value);
            }}
        >
            <SelectTrigger className="w-[300px] text-foreground">
                <SelectValue />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    <SelectItem value="apple">Apple</SelectItem>
                    <SelectItem value="banana">Banana</SelectItem>
                    <SelectItem value="blueberry">Blueberry</SelectItem>
                    <SelectItem value="grapes">Grapes</SelectItem>
                    <SelectItem value="pineapple">Pineapple</SelectItem>
               </SelectGroup>
           </SelectContent>
       </Select>
   );
}

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.

Upvotes: 9

J&#233;ssica Braga
J&#233;ssica Braga

Reputation: 1

<Select>
<SelectTrigger className="w-[118px] text-slate-400 ">
<SelectValue placeholder="Apple">Apple</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Apple</SelectLabel>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="blueberry">Blueberry</SelectItem>
<SelectItem value="grapes">Grapes</SelectItem>
<SelectItem value="pineapple">Pineapple</SelectItem>
</SelectGroup>
</SelectContent>
</Select>

Upvotes: 0

jjK
jjK

Reputation: 11

TRY ARIA-LABEL

function SelectMenu({
  name,
  data,
  value,
  onValueChange,
  defaultValue,
}: ISelectMenu) {
  return (
    <label className="w-full relative">
      <span className="absolute p-[5px] bg-black text-mySelect text-xs font-medium -top-[15px] left-5">
        {name}
      </span>
      <Select onValueChange={onValueChange} value={value}>
        <SelectTrigger className="w-full text-myText rounded-[15px] py-5 px-[20px]">
          <SelectValue className={"text-white"} aria-label={value} />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {data?.map((item, index) => (
              <SelectItem value={item.value} key={index}>
                {item.item}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </label>
  );
}

Upvotes: 0

Bersan
Bersan

Reputation: 3487

Here is a more complete example setting a default value and controlling the state:

import React, { useState } from 'react'

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../ui/select'

const [selectedOption, setSelectedOption] = useState('apple')

<Select
  value={selectedOption}
  onValueChange={(value) => {
    setSelectedOption(value)
  }}
>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Upvotes: 3

Related Questions