Merge pull request #4488 from nextcloud-libraries/fix/checkbox-radio-…

…switch
nextcloud-libraries · Aug 31, 2023 · 1a4caa1 · 1a4caa1
2 parents a53da1e + 6949047
commit 1a4caa1
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -414,6 +414,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Required state
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Loading state
 		 */
@@ -441,6 +449,7 @@ export default {
 			return {
 				checked: this.isChecked,
 				indeterminate: this.indeterminate,
+				required: this.required,
 				name: this.name,
 			}
 		},
@@ -609,13 +618,16 @@ export default {
 <style lang="scss" scoped>
 .checkbox-radio-switch {
 	display: flex;
+	align-items: center;
 
 	&__input {
 		position: absolute;
 		z-index: -1;
 		opacity: 0 !important; // We need !important, or it gets overwritten by server style
 		width: var(--icon-size);
 		height: var(--icon-size);
+		// Same as label padding
+		margin: 4px $icon-margin;
 	}
 
 	&__input:focus-visible + label {