This repository has been archived on 2024-04-04. You can view files and clone it, but cannot push or open issues or pull requests.
tailwindui/vue/components/application-ui/elements/button-groups/with_checkbox_and_dropdown.vue
2024-01-24 19:02:44 +08:00

29 lines
1.1 KiB
Vue

<!--
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}
```
-->
<template>
<span class="inline-flex rounded-md shadow-sm">
<span class="inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2">
<label for="select-all" class="sr-only">Select all</label>
<input id="select-all" type="checkbox" name="select-all" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
</span>
<label for="message-type" class="sr-only">Select message type</label>
<select id="message-type" name="message-type" class="-ml-px block w-full rounded-l-none rounded-r-md border-0 bg-white py-1.5 pl-3 pr-9 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<option>Unread messages</option>
<option>Sent messages</option>
<option>All messages</option>
</select>
</span>
</template>