Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
FilterCheckboxes.svelte
ResultList.svelte
state.svelte.js
data.js
FilterSelect.svelte
FilterInput.svelte
<script>
// Filter data with multiple checkboxes / input groups with $state and $derived
// https://dev.to/mandrasch/svelte-5-share-state-between-components-for-dummies-4gd2
// TODO: Use URL params and load selected values for checkboxes/selects, add pagination
import {
selectedColorsState,
selectedStylesState,
selectedSizeState,
searchTextState
} from './state.svelte';

import FilterCheckboxes from './FilterCheckboxes.svelte';
import FilterSelect from './FilterSelect.svelte';
import FilterInput from './FilterInput.svelte';
import ResultList from './ResultList.svelte';
const availableColorOptions = [
{
label: "Red",
value: "red"
},{
label: "Green",
value: "green"
},
{
label: "Beige",
value: "beige"
}
];

const availableStyleOptions = [
{
label: "Casual",
value: "casual"
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */