Select

<div class="grid w-full max-w-xs gap-4">
    <div class="flex items-start justify-between gap-4">
        <div class="grid gap-1">
            <Label for="select-align-item" Class="font-medium">Align Item</Label>
            <p class="text-muted-foreground text-sm">Toggle to align the item with the trigger.</p>
        </div>
        <Switch id="select-align-item" Checked="@_alignItemWithTrigger" CheckedChanged="(value) => _alignItemWithTrigger = value" />
    </div>
    <Select DefaultValue="banana">
        <SelectTrigger Class="w-full">
            <SelectValue />
        </SelectTrigger>
        <SelectContent Position="@(_alignItemWithTrigger ? "item-aligned" : "popper")">
            <SelectGroup>
                <SelectItem Value="apple" Text="Apple">Apple</SelectItem>
                <SelectItem Value="banana" Text="Banana">Banana</SelectItem>
                <SelectItem Value="blueberry" Text="Blueberry">Blueberry</SelectItem>
                <SelectItem Value="grapes" Text="Grapes">Grapes</SelectItem>
                <SelectItem Value="pineapple" Text="Pineapple">Pineapple</SelectItem>
            </SelectGroup>
        </SelectContent>
    </Select>
</div>

@code {
    private bool _alignItemWithTrigger = true;
}

<Select>
    <SelectTrigger Class="w-full max-w-48">
        <SelectValue Placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
        <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem Value="apple" Text="Apple">Apple</SelectItem>
            <SelectItem Value="banana" Text="Banana">Banana</SelectItem>
            <SelectItem Value="blueberry" Text="Blueberry">Blueberry</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
            <SelectLabel>Vegetables</SelectLabel>
            <SelectItem Value="carrot" Text="Carrot">Carrot</SelectItem>
            <SelectItem Value="broccoli" Text="Broccoli">Broccoli</SelectItem>
            <SelectItem Value="spinach" Text="Spinach">Spinach</SelectItem>
        </SelectGroup>
    </SelectContent>
</Select>

<Select>
    <SelectTrigger Class="w-full max-w-64">
        <SelectValue Placeholder="Select a timezone" />
    </SelectTrigger>
    <SelectContent>
        <SelectGroup>
            <SelectLabel>North America</SelectLabel>
            <SelectItem Value="est" Text="Eastern Standard Time">Eastern Standard Time</SelectItem>
            <SelectItem Value="cst" Text="Central Standard Time">Central Standard Time</SelectItem>
            <SelectItem Value="mst" Text="Mountain Standard Time">Mountain Standard Time</SelectItem>
            <SelectItem Value="pst" Text="Pacific Standard Time">Pacific Standard Time</SelectItem>
            <SelectItem Value="akst" Text="Alaska Standard Time">Alaska Standard Time</SelectItem>
            <SelectItem Value="hst" Text="Hawaii Standard Time">Hawaii Standard Time</SelectItem>
        </SelectGroup>
        <SelectGroup>
            <SelectLabel>Europe &amp; Africa</SelectLabel>
            <SelectItem Value="gmt" Text="Greenwich Mean Time">Greenwich Mean Time</SelectItem>
            <SelectItem Value="cet" Text="Central European Time">Central European Time</SelectItem>
            <SelectItem Value="eet" Text="Eastern European Time">Eastern European Time</SelectItem>
            <SelectItem Value="west" Text="Western European Summer Time">Western European Summer Time</SelectItem>
            <SelectItem Value="cat" Text="Central Africa Time">Central Africa Time</SelectItem>
            <SelectItem Value="eat" Text="East Africa Time">East Africa Time</SelectItem>
        </SelectGroup>
        <SelectGroup>
            <SelectLabel>Asia</SelectLabel>
            <SelectItem Value="msk" Text="Moscow Time">Moscow Time</SelectItem>
            <SelectItem Value="ist" Text="India Standard Time">India Standard Time</SelectItem>
            <SelectItem Value="cst_china" Text="China Standard Time">China Standard Time</SelectItem>
            <SelectItem Value="jst" Text="Japan Standard Time">Japan Standard Time</SelectItem>
            <SelectItem Value="kst" Text="Korea Standard Time">Korea Standard Time</SelectItem>
            <SelectItem Value="ist_indonesia" Text="Indonesia Central Standard Time">Indonesia Central Standard Time</SelectItem>
        </SelectGroup>
        <SelectGroup>
            <SelectLabel>Australia &amp; Pacific</SelectLabel>
            <SelectItem Value="awst" Text="Australian Western Standard Time">Australian Western Standard Time</SelectItem>
            <SelectItem Value="acst" Text="Australian Central Standard Time">Australian Central Standard Time</SelectItem>
            <SelectItem Value="aest" Text="Australian Eastern Standard Time">Australian Eastern Standard Time</SelectItem>
            <SelectItem Value="nzst" Text="New Zealand Standard Time">New Zealand Standard Time</SelectItem>
            <SelectItem Value="fjt" Text="Fiji Time">Fiji Time</SelectItem>
        </SelectGroup>
        <SelectGroup>
            <SelectLabel>South America</SelectLabel>
            <SelectItem Value="art" Text="Argentina Time">Argentina Time</SelectItem>
            <SelectItem Value="bot" Text="Bolivia Time">Bolivia Time</SelectItem>
            <SelectItem Value="brt" Text="Brasilia Time">Brasilia Time</SelectItem>
            <SelectItem Value="clt" Text="Chile Standard Time">Chile Standard Time</SelectItem>
        </SelectGroup>
    </SelectContent>
</Select>

<Select Disabled="true">
    <SelectTrigger Class="w-full max-w-48">
        <SelectValue Placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
        <SelectGroup>
            <SelectItem Value="apple" Text="Apple">Apple</SelectItem>
            <SelectItem Value="banana" Text="Banana">Banana</SelectItem>
            <SelectItem Value="blueberry" Text="Blueberry">Blueberry</SelectItem>
            <SelectItem Value="grapes" Text="Grapes" Disabled="true">Grapes</SelectItem>
            <SelectItem Value="pineapple" Text="Pineapple">Pineapple</SelectItem>
        </SelectGroup>
    </SelectContent>
</Select>

<div class="grid w-full max-w-48 gap-2" data-invalid>
    <Label for="invalid-select" Class="text-destructive">Fruit</Label>
    <Select>
        <SelectTrigger Id="invalid-select" Class="w-full" aria-invalid="true">
            <SelectValue Placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
            <SelectGroup>
                <SelectItem Value="apple" Text="Apple">Apple</SelectItem>
                <SelectItem Value="banana" Text="Banana">Banana</SelectItem>
                <SelectItem Value="blueberry" Text="Blueberry">Blueberry</SelectItem>
            </SelectGroup>
        </SelectContent>
    </Select>
    <p class="text-destructive text-sm">Please select a fruit.</p>
</div>