natxocc
59e6d972a8
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
267 lines
7.9 KiB
Markdown
267 lines
7.9 KiB
Markdown
# Select
|
||
|
||
Dropdown select component with full DaisyUI styling and reactive options.
|
||
|
||
## Tag
|
||
|
||
`Select`, `Options`
|
||
|
||
## Select Props
|
||
|
||
| Prop | Type | Default | Description |
|
||
| :--- | :--- | :--- | :--- |
|
||
| `value` | `string \| Signal<string>` | `''` | Selected value |
|
||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||
| `onchange` | `function` | `-` | Change event handler |
|
||
|
||
## Options Props
|
||
|
||
| Prop | Type | Default | Description |
|
||
| :--- | :--- | :--- | :--- |
|
||
| `items` | `Array<string \| {value, label}> \| Signal<Array>` | `[]` | Array of items (strings or objects) |
|
||
| `placeholder` | `string` | `-` | Optional placeholder option (disabled, selected) |
|
||
|
||
## Styling
|
||
|
||
Select supports all **daisyUI Select classes**:
|
||
|
||
| Category | Keywords | Description |
|
||
| :--- | :--- | :--- |
|
||
| Color | `select-primary`, `select-secondary`, `select-accent`, `select-info`, `select-success`, `select-warning`, `select-error` | Select color variants |
|
||
| Size | `select-xs`, `select-sm`, `select-md`, `select-lg` | Select scale |
|
||
| Style | `select-bordered` (default), `select-ghost` | Visual style variants |
|
||
|
||
> For further details, check the [daisyUI Select Documentation](https://daisyui.com/components/select) – Full reference for CSS classes.
|
||
|
||
## Live Examples
|
||
|
||
### Basic Select
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const BasicDemo = () => {
|
||
const selected = $('apple');
|
||
|
||
return Div({ class: 'form-control w-full max-w-xs' }, [
|
||
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Choose a fruit')),
|
||
Select({
|
||
class: 'select select-bordered w-full',
|
||
value: selected,
|
||
onchange: (e) => selected(e.target.value)
|
||
}, [
|
||
Options({
|
||
items: [
|
||
{ value: 'apple', label: '🍎 Apple' },
|
||
{ value: 'banana', label: '🍌 Banana' },
|
||
{ value: 'orange', label: '🍊 Orange' },
|
||
{ value: 'grape', label: '🍇 Grape' }
|
||
]
|
||
})
|
||
])
|
||
]);
|
||
};
|
||
mount(BasicDemo, '#demo-basic');
|
||
```
|
||
|
||
### With Reactive Display
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const ReactiveDemo = () => {
|
||
const selected = $('small');
|
||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||
Div({ class: 'form-control w-full max-w-xs' }, [
|
||
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Select size')),
|
||
Select({
|
||
class: 'select select-bordered w-full',
|
||
value: selected,
|
||
onchange: (e) => selected(e.target.value)
|
||
}, [
|
||
Options({
|
||
items: [
|
||
{ value: 'small', label: 'Small' },
|
||
{ value: 'medium', label: 'Medium' },
|
||
{ value: 'large', label: 'Large' }
|
||
]
|
||
})
|
||
])
|
||
]),
|
||
Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
|
||
]);
|
||
};
|
||
mount(ReactiveDemo, '#demo-reactive');
|
||
```
|
||
|
||
### Disabled State
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const DisabledDemo = () => {
|
||
return Div({ class: 'form-control w-full max-w-xs' }, [
|
||
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Country (disabled)')),
|
||
Select({
|
||
class: 'select select-bordered w-full',
|
||
value: 'mx',
|
||
disabled: true
|
||
}, [
|
||
Options({
|
||
items: [
|
||
{ value: 'mx', label: 'Mexico' },
|
||
{ value: 'us', label: 'United States' },
|
||
{ value: 'ca', label: 'Canada' }
|
||
]
|
||
})
|
||
])
|
||
]);
|
||
};
|
||
mount(DisabledDemo, '#demo-disabled');
|
||
```
|
||
|
||
### Dynamic Items
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const DynamicDemo = () => {
|
||
const category = $('fruits');
|
||
const selectedItem = $('');
|
||
|
||
const items = {
|
||
fruits: [
|
||
{ value: 'apple', label: '🍎 Apple' },
|
||
{ value: 'banana', label: '🍌 Banana' }
|
||
],
|
||
vegetables: [
|
||
{ value: 'carrot', label: '🥕 Carrot' },
|
||
{ value: 'broccoli', label: '🥦 Broccoli' }
|
||
]
|
||
};
|
||
|
||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||
Div({ class: 'form-control w-full max-w-xs' }, [
|
||
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Category')),
|
||
Select({
|
||
class: 'select select-bordered w-full',
|
||
value: category,
|
||
onchange: (e) => {
|
||
category(e.target.value);
|
||
selectedItem('');
|
||
}
|
||
}, [
|
||
Options({
|
||
items: [
|
||
{ value: 'fruits', label: 'Fruits' },
|
||
{ value: 'vegetables', label: 'Vegetables' }
|
||
]
|
||
})
|
||
])
|
||
]),
|
||
Div({ class: 'form-control w-full max-w-xs' }, [
|
||
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Item')),
|
||
Select({
|
||
class: 'select select-bordered w-full',
|
||
value: selectedItem,
|
||
onchange: (e) => selectedItem(e.target.value)
|
||
}, [
|
||
Options({
|
||
items: () => items[category()] || []
|
||
})
|
||
])
|
||
]),
|
||
() => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
|
||
]);
|
||
};
|
||
mount(DynamicDemo, '#demo-dynamic');
|
||
```
|
||
|
||
### All Variants
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const VariantsDemo = () => {
|
||
const primary = $('option1');
|
||
const secondary = $('option2');
|
||
const ghost = $('');
|
||
|
||
return Div({ class: 'flex flex-col gap-4' }, [
|
||
Div({ class: 'form-control w-full max-w-xs' }, [
|
||
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Primary Select')),
|
||
Select({
|
||
class: 'select select-primary w-full',
|
||
value: primary,
|
||
onchange: (e) => primary(e.target.value)
|
||
}, [
|
||
Options({
|
||
items: [
|
||
{ value: 'option1', label: 'Option 1' },
|
||
{ value: 'option2', label: 'Option 2' },
|
||
{ value: 'option3', label: 'Option 3' }
|
||
]
|
||
})
|
||
])
|
||
]),
|
||
Div({ class: 'form-control w-full max-w-xs' }, [
|
||
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Secondary Select')),
|
||
Select({
|
||
class: 'select select-secondary w-full',
|
||
value: secondary,
|
||
onchange: (e) => secondary(e.target.value)
|
||
}, [
|
||
Options({
|
||
items: [
|
||
{ value: 'option1', label: 'Option 1' },
|
||
{ value: 'option2', label: 'Option 2' }
|
||
]
|
||
})
|
||
])
|
||
]),
|
||
Div({ class: 'form-control w-full max-w-xs' }, [
|
||
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Ghost Select')),
|
||
Select({
|
||
class: 'select select-ghost w-full',
|
||
value: ghost,
|
||
onchange: (e) => ghost(e.target.value)
|
||
}, [
|
||
Options({
|
||
placeholder: 'Select an option',
|
||
items: [
|
||
{ value: 'opt1', label: 'Option 1' },
|
||
{ value: 'opt2', label: 'Option 2' }
|
||
]
|
||
})
|
||
])
|
||
])
|
||
]);
|
||
};
|
||
mount(VariantsDemo, '#demo-variants');
|
||
``` |