Bindings /
Group inputs
a. Basics b. Adding data c. Dynamic attributes d. Styling e. Nested components f. Making an app a. Assignments b. Declarations c. Statements d. Updating arrays and objects a. Declaring props b. Default values c. Spread props a. If blocks b. Else blocks c. Else-if blocks d. Each blocks e. Keyed each blocks f. Await blocks a. DOM events b. Inline handlers c. Event modifiers d. Component events e. Event forwarding f. DOM event forwarding a. Text inputs b. Numeric inputs c. Checkbox inputs d. Group inputs e. Textarea inputs f. Select bindings g. Select multiple h. Contenteditable bindings i. Each block bindings j. Media elements k. Dimensions l. This m. Component bindings n. Binding to component instances a. onMount b. onDestroy c. beforeUpdate and afterUpdate d. tick a. Writable stores b. Auto-subscriptions c. Readable stores d. Derived stores e. Custom stores f. Store bindings a. Tweened b. Spring a. The transition directive b. Adding parameters c. In and out d. Custom CSS transitions e. Custom JS transitions f. Transition events g. Local transitions h. Deferred transitions i. Key blocks a. The animate directive a. The use directive b. Adding parameters a. The class directive b. Shorthand class directive c. Inline styles d. The style directive a. Slots b. Slot fallbacks c. Named slots d. Checking for slot content e. Slot props a. setContext and getContext a. <svelte:self> b. <svelte:component> c. <svelte:element> d. <svelte:window> e. <svelte:window> bindings f. <svelte:document> g. <svelte:body> h. <svelte:head> i. <svelte:options> j. <svelte:fragment> a. Sharing code b. Exports a. The @debug tag b. HTML tags a. Congratulations!
If you have multiple inputs relating to the same value, you can use bind:group
along with the value
attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
Add bind:group
to each input:
< input type = radio bind : group = {scoops} name = "scoops" value = { 1 }>
In this case, we could make the code simpler by moving the checkbox inputs into an each
block. First, add a menu
variable to the <script>
block...
let menu = [
'Cookies and cream' ,
'Mint choc chip' ,
'Raspberry ripple'
];
...then replace the second section:
< h2 >Flavours</ h2 >
{# each menu as flavour}
< label >
< input type = checkbox bind : group = {flavours} name = "flavours" value = {flavour}>
{flavour}
</ label >
{/ each }
It's now easy to expand our ice cream menu in new and exciting directions.
Show me