LWC lightning-checkbox-group horizontal 選択肢 横並びにする方法

いろいろ調べましたが、現時点では方法は見つかりませんでした。。。

代わりに、コンポーネントを作っちゃった方か早かったです

早速

HTMLlightningCheckboxGroupHorizontal.html

<template>
    <div class="slds-p-around_xx-small">
        <div>
            <div class="slds-form-element__label">{label}</div>
            <div>
                <template for:each={options} for:item="item">
                    <fieldset key={item.value} style="display:inline-flex">
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <div class="slds-checkbox">
                                    <input type="checkbox" name="options" id={item.value} value={item.value}/>
                                    <label class="slds-checkbox__label" for={item.value}>
                                        <span class="slds-checkbox_faux"></span>
                                        <span class="slds-form-element__label">{item.label}</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </template>
            </div>
        </div>
    </div>
</template>

JSlightningCheckboxGroupHorizontal.js

import { api, LightningElement } from 'lwc';

export default class LightningCheckboxGroupHorizontal extends LightningElement {
    @api options;
    @api label;

    @api get checkedValue() {

        const checked = Array.from(this.template.querySelectorAll('input'))
            .filter((element) => element.checked)
            .map((element) => element.value);
        return checked.join(', ');
    }
}

利用方法:

<c-lightning-checkbox-group-horizontal class=”box1″ label=”てすと” options={Options}></c-lightning-checkbox-group-horizontal>

let subbox = this.template.querySelector(‘.box1’);        
alert(subbox.checkedValue);


以上です。