shadcn-svelteのSelectコンポーネントの値の取得・操作について

はじめに

Reactではよく使われるUIコンポーネントの「shadcn」ですが、これをSvelteに有志の方が移植してくれています。

shadcnは、シンプルでビジネス寄りなデザインのUIコンポーネントです。
Tailwind CSSを利用しているため、クラスを追加するだけで簡単にデザインを調整することができます。

本家shadcn様：https://ui.shadcn.com/
shadcn-svelte：https://www.shadcn-svelte.com/

しかし、上記のドキュメントを見ても、ばっちり網羅しているわけでもなく、サンプルも少なめなので、使うにあたってちょっと迷ったことがありました。
以下、そういった部分について列挙しますので、良かったら参考にしてshadcn-svelteを使ってみてください。

他のコンポーネントについては、追加したり、別記事にしたりするかもしれません。

---

Select

Doc：https://www.shadcn-svelte.com/docs/components/select

選択しているアイテムを取得したり操作する方法がわからなかったんですが、これでいけました。

<script>
    let selectedObject: {
        value: string,
        label: stirng,
        disabled: boolean
    }
</script>

<Select.Root bind:selected={selectedObject} >
    <Select.Trigger >
        <Select.Value placeholder="くだものを選んでね" />
    </Select.Trigger>
    <Select.Content>
        <Select.Item value="banana">バナナ</Select.Item>
        <Select.Item value="orange">オレンジ</Select.Item>
    </Select.Content>
</Select.Root>

<p>
    選択した値：{selectedObject.value}
</p>

以上です。