One component library.
Native in four frameworks.

ReactJSX · useState

import { useState } from 'react';
import { Select } from '@fibrae/semi-ui-react';

const optionList = [
    { value: 'douyin', label: '抖音' },
    { value: 'jianying', label: '剪映' },
];

export default function Demo() {
    const [value, setValue] = useState<string | undefined>('douyin');

    return (
        <Select
            value={value}
            optionList={optionList}
            onChange={setValue}
        />
    );
}

VueSFC · v-model

<script setup lang="ts">
    import { ref } from 'vue';
    import { Select } from '@fibrae/semi-ui-vue';

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'jianying', label: '剪映' },
    ];

    const value = ref<string | undefined>('douyin');
</script>

<template>
    <Select
        v-model="value"
        :optionList="optionList"
    />
</template>

SolidJSX · createSignal

import { createSignal } from 'solid-js';
import { Select } from '@fibrae/semi-ui-solid';

const optionList = [
    { value: 'douyin', label: '抖音' },
    { value: 'jianying', label: '剪映' },
];

export default function Demo() {
    const [value, setValue] = createSignal<string | undefined>('douyin');

    return (
        <Select
            value={value()}
            optionList={optionList}
            onChange={(v) => setValue(v)}
        />
    );
}

Svelte 5runes · $state

<script lang="ts">
    import { Select } from '@fibrae/semi-ui-svelte';

    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'jianying', label: '剪映' },
    ];

    let value = $state<string | undefined>('douyin');
</script>

<Select
    bind:value
    {optionList}
/>