diff --git a/src/stories/checkbox/fd-checkbox.stories.ts b/src/stories/checkbox/fd-checkbox.stories.ts
index 9b108f3e333..a0f2f81972d 100644
--- a/src/stories/checkbox/fd-checkbox.stories.ts
+++ b/src/stories/checkbox/fd-checkbox.stories.ts
@@ -1,5 +1,5 @@
import { moduleMetadata } from '@storybook/angular';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';
import { ReactiveFormsModule } from '@angular/forms';
@@ -19,25 +19,34 @@ export default {
]
};
+const state = {
+ valid: 'valid',
+ invalid: 'invalid',
+ info: 'info',
+ warning: 'warning',
+}
export const Checkbox = () => ({
template:
`
-
-
-
-
-
-
-
+
+
`,
props: {
checkboxValue1: boolean('checkbox 1', false),
- checkboxValue2: boolean('checkbox 2', false),
- checkboxValue3: boolean('checkbox 3', false),
- checkboxValue4: boolean('checkbox 4', false),
- checkboxValue5: boolean('checkbox 5', false),
- checkboxValue6: boolean('checkbox 6', false),
- checkboxValue7: boolean('checkbox 7', false),
+ state: select('state', state, 'info'),
+ label: text('label', 'Checkbox'),
+ name: text('name', 'Checkbox'),
+ disabled: boolean('disabled', false),
+ compact: boolean('compact', false),
+ tristate: boolean('tristate', false),
+ tristateSelectable: boolean('tristateSelectable', false),
}
});