Preloading Selected Values in Select and Checkbox Components (ShadCN for Svelte)

[leonardomporto]

Select Does Not Show Initial Value
I have a status field in my advertisement object, which can be "published" or "draft". The goal is to load the saved value from the database and display it correctly in Select.Trigger.

<script lang="ts">
  import * as Select from "$lib/components/ui/select";
  export let advertisement;

  // Available options
  const statusOptions = {
    published: "Published",
    draft: "Draft",
  };

  // Trying to set the initial label
  let selectedLabel = statusOptions[advertisement.status] || "Select a status";
</script>

<label for="status">Ad Status:</label>

<Select.Root bind:value={advertisement.status}>
  <Select.Trigger class="w-[180px] border p-2 rounded-md bg-white">
    {selectedLabel} <!-- Does not display correctly on page load -->
  </Select.Trigger>
  <Select.Content>
    {#each Object.entries(statusOptions) as [value, label]}
      <Select.Item value={value}>{label}</Select.Item>
    {/each}
  </Select.Content>
</Select.Root>

Problem:
Select.Trigger only displays the placeholder instead of the selected value.
When I select an option, it updates correctly.
I need the saved database value to be displayed immediately on load.

like this simple code.

  <label for="status">Status do Anúncio:</label>
  <select id="status" name="status" bind:value={advertisement.status} required>
    <option value="published">Publicado</option>
    <option value="draft">Rascunho</option>
  </select>

I have the same problem with checkbox.
If anyone can provide guidance or the best approach for handling this in ShadCN for Svelte, I would greatly appreciate it!

Thanks in advance!