diff --git a/libs/components/src/radio-button/radio-button.component.html b/libs/components/src/radio-button/radio-button.component.html
index 6ecbbff862d..2bcd4c0d5f1 100644
--- a/libs/components/src/radio-button/radio-button.component.html
+++ b/libs/components/src/radio-button/radio-button.component.html
@@ -4,7 +4,7 @@
bitRadio
[id]="inputId"
[name]="name"
- [disabled]="disabled"
+ [disabled]="groupDisabled || disabled"
[value]="value"
[checked]="selected"
(change)="onInputChange()"
diff --git a/libs/components/src/radio-button/radio-button.component.ts b/libs/components/src/radio-button/radio-button.component.ts
index 32aa6e5577a..8da02488d47 100644
--- a/libs/components/src/radio-button/radio-button.component.ts
+++ b/libs/components/src/radio-button/radio-button.component.ts
@@ -11,6 +11,7 @@ let nextId = 0;
export class RadioButtonComponent {
@HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
@Input() value: unknown;
+ @Input() disabled = false;
constructor(private groupComponent: RadioGroupComponent) {}
@@ -26,7 +27,7 @@ export class RadioButtonComponent {
return this.groupComponent.selected === this.value;
}
- get disabled() {
+ get groupDisabled() {
return this.groupComponent.disabled;
}
diff --git a/libs/components/src/radio-button/radio-button.stories.ts b/libs/components/src/radio-button/radio-button.stories.ts
index d2689e84d2c..4990c6b6ce0 100644
--- a/libs/components/src/radio-button/radio-button.stories.ts
+++ b/libs/components/src/radio-button/radio-button.stories.ts
@@ -14,7 +14,7 @@ const template = `
Group of radio buttons
First
Second
- Third
+ Third
`;
@@ -41,7 +41,7 @@ class ExampleComponent {
this.formObj.patchValue({ radio: value });
}
- @Input() set disabled(disable: boolean) {
+ @Input() set groupDisabled(disable: boolean) {
if (disable) {
this.formObj.disable();
} else {
@@ -49,6 +49,8 @@ class ExampleComponent {
}
}
+ @Input() optionDisabled = false;
+
constructor(private formBuilder: FormBuilder) {}
}
@@ -81,7 +83,8 @@ export default {
},
args: {
selected: TestValue.First,
- disabled: false,
+ groupDisabled: false,
+ optionDisabled: false,
label: true,
},
argTypes: {
@@ -101,7 +104,7 @@ export default {
const DefaultTemplate: Story = (args: ExampleComponent) => ({
props: args,
- template: ``,
+ template: ``,
});
export const Default = DefaultTemplate.bind({});