0

Is it possible to do it?

<lightning-input
          class="cxd-toggle__label-medium"
          type="toggle"
          label="Block list"
          checked={relaxedChecked}
          disabled={relaxedDisabled}
          onchange={unlockCheckboxesRelaxed}
        ></lightning-input>

css

        .cxd-toggle__label-medium {
  font-size: 14px;}

wasn't able to find some webhooks

1 Answer 1

0

The best practice is to use styling hooks to customize the styles of the lightning-input component, rather than overriding the slds-form-element__label class.

Styling hooks are CSS custom properties that let you change the appearance of base components without affecting their functionality or behaviour.

You can use the :host selector to apply the styling hooks to your component.

For example, to change the font size of the label, you can use the --lwc-formLabelFontSize styling hook:

:host {
--lwc-formLabelFontSize: 14px;
}
3
  • Thanks but it really doesn't work. For now style is kinda :host .cxd-toggle__label-medium { --slds-form-element__label-font-size: 16px; }
    – pincet
    Nov 28, 2023 at 8:47
  • I have edited my answer please check. Nov 28, 2023 at 8:48
  • It works but there is need to center it vertically now. Where can i find the whole --lwc hooks list for form elements?
    – pincet
    Nov 28, 2023 at 8:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .