diff --git a/.changeset/dry-dancers-boil.md b/.changeset/dry-dancers-boil.md new file mode 100644 index 00000000..40c6e422 --- /dev/null +++ b/.changeset/dry-dancers-boil.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": patch +--- + +Add focus styles for checkbox diff --git a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue index 9f54f797..3b933827 100644 --- a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue +++ b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue @@ -292,6 +292,12 @@ export default defineComponent({ height: 16px; position: relative; + &:focus-within { + outline: 2px solid var(--color-border-brand-selected); + outline-offset: 2px; + border-radius: var(--border-radius-checkbox); + } + & input[type="checkbox"] { opacity: 0; display: block;