Storybook: Field validation Story (#23227)

packages/grafana-ui/src/components/Forms/Input/Input.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { boolean, text, select, number } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
 import { Input } from './Input';
@@ -7,6 +7,7 @@ import mdx from './Input.mdx';
 import { getAvailableIcons, IconType } from '../../Icon/types';
 import { KeyValue } from '@grafana/data';
 import { Icon } from '../../Icon/Icon';
+import { Field } from '../Field';
 
 export default {
   title: 'Forms/Input',
@@ -95,3 +96,15 @@ export const simple = () => {
     </div>
   );
 };
+
+export const withFieldValidation = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div>
+      <Field invalid={value === ''} error={value === '' ? 'This input is required' : ''}>
+        <Input value={value} onChange={e => setValue(e.currentTarget.value)} />
+      </Field>
+    </div>
+  );
+};