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

[leonardomporto]

I am using ShadCN for Svelte and encountering issues displaying preselected values in the Select and Checkbox components.

The components work fine when selecting new options, but they do not correctly display the initial value when the page loads.

Issue 1: 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>

this simple html solution, is work.

<script lang="ts">
  export let name: string = "";
  export let value: string | number = "";
  export let checked: boolean = false;
  export let label: string = "";
</script>

compoent:


<label
  class="flex items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
  <input
    type="checkbox"
    {name}
    {value}
    bind:checked
    class="accent-black h-4 w-4 border border-black"
  />
  {label}
</label>

===========
in the +page.svelte

 <div class="space-y-1 grid gap-3 sm:grid-cols-2">
                    {#each languages as lang}
                      <div class="flex items-center gap-2 space-x-2">
                        <CustomCheckbox
                          name="languages"
                          value={lang.id}
                          checked={advertisement.profile.profile_language.some(
                            (l) => l.language.id === lang.id
                          )}
                          label={lang.name}
                        />
                      </div>
                    {/each}
                  </div>

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