Select RS Yew Examples

<Select
    name="default-select"
    placeholder="Choose a fruit"
    onchange={Callback::from(move |value: Vec<String>| state.set(value))}
>
    <Group>
        <Option value="apple" label="🍎 Apple" />
        <Option value="banana" label="🍌 Banana" />
    </Group>
</Select>

<Select
    name="disabled-select"
    placeholder="Disabled"
    disabled=true
>
    <Group>
        <Option value="apple" label="🍎 Apple" />
        <Option value="banana" label="🍌 Banana" />
    </Group>
</Select>

<Select
    name="disabled-options"
    id="disabled-options"
    placeholder="Choose an option"
    class="w-full border border-gray-200 rounded-md p-2"
    select_class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-green-500"
>
    <Group label="Fruits">
        <Option value="apple" label="Apple" disabled={true} />
        <Option value="banana" label="Banana" disabled={true} />
    </Group>
    <Group label="Vegetables">
        <Option value="carrot" label="Carrot" />
        <Option value="broccoli" label="Broccoli" />
    </Group>
</Select>

<Select
    name="custom-styled-select"
    placeholder="Styled options"
    class="w-full border border-pink-300 rounded-md p-2 focus:ring-2 focus:ring-pink-500"
    select_class="w-full bg-pink-100 text-pink-900 p-2 shadow-lg rounded-lg"
>
    <Group>
        <Option value="rainbow" label="🌈 Rainbow" />
        <Option value="star" label="⭐ Star" />
    </Group>
</Select>

<Select
    name="emoji-select"
    placeholder="Pick an emoji"
    onchange={Callback::from(move |value: Vec<String>| state.set(value))}
    class="w-full border border-blue-300 rounded-md p-2 focus:ring-2 focus:ring-blue-500"
    select_class="w-full p-2 shadow-lg rounded-lg"
>
    <Group label="Faces" group=true>
        <Option value="😀" label="😀 Grinning Face" />
        <Option value="😂" label="😂 Laughing Face" />
    </Group>
    <Group label="Celebrations" group=true>
        <Option value="🎉" label="🎉 Party Popper" />
        <Option value="🎂" label="🎂 Birthday Cake" />
    </Group>
</Select>

<Select
    name="multi-select"
    placeholder="Select multiple"
    multiple=true
    onchange={Callback::from(move |value: Vec<String>| state.set(value))}
    class="w-full border border-green-300 rounded-md p-2 focus:ring-2 focus:ring-green-500"
    labels_class="flex flex-wrap gap-2 mt-2"
    label_class="bg-green-200 text-green-800 px-3 py-1 rounded-md"
    close_class="m-2 text-red-600 hover:text-red-800"
    select_class="w-full shadow-lg rounded-lg"
>
    <Group label="Vegetables">
        <Option value="🥕" label="🥕 Carrot" />
        <Option value="🥦" label="🥦 Broccoli" />
    </Group>
    <Group label="Fruits">
        <Option value="🍎" label="🍎 Apple" />
        <Option value="🍇" label="🍇 Grapes" />
    </Group>
</Select>