diff --git a/packages/fether-ui/package.json b/packages/fether-ui/package.json
index 14ee73769a72fa6ff310fa3a58f20530452749c9..9d676770c8ce5416e6e0c3892da5877a2213d7f4 100644
--- a/packages/fether-ui/package.json
+++ b/packages/fether-ui/package.json
@@ -33,7 +33,9 @@
"dependencies": {
"react-blockies": "^1.3.0",
"react-content-loader": "^3.1.2",
- "react-tooltip": "^3.6.1"
+ "react-tooltip": "^3.6.1",
+ "semantic-ui-css": "^2.3.2",
+ "semantic-ui-react": "^0.81.3"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.49",
diff --git a/packages/fether-ui/src/Form/Field/Field.js b/packages/fether-ui/src/Form/Field/Field.js
new file mode 100644
index 0000000000000000000000000000000000000000..94557309fc51c410bf6968daa5b7761e3026587e
--- /dev/null
+++ b/packages/fether-ui/src/Form/Field/Field.js
@@ -0,0 +1,32 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+import { Popup } from 'semantic-ui-react';
+import 'semantic-ui-css/components/popup.min.css';
+
+export const Field = ({
+ as: T = 'input',
+ children,
+ input,
+ label,
+ meta,
+ ...otherProps
+}) => (
+
+
+
}
+ />
+
+ {children}
+
+);
diff --git a/packages/fether-ui/src/FormField/index.js b/packages/fether-ui/src/Form/Field/index.js
similarity index 81%
rename from packages/fether-ui/src/FormField/index.js
rename to packages/fether-ui/src/Form/Field/index.js
index eed88ea492095de7014d61b7bdc0962e033cc10d..1a046ee28ad7b641bd00ee1386a9b16063a1d2cd 100644
--- a/packages/fether-ui/src/FormField/index.js
+++ b/packages/fether-ui/src/Form/Field/index.js
@@ -3,4 +3,4 @@
//
// SPDX-License-Identifier: BSD-3-Clause
-export * from './FormField';
+export * from './Field';
diff --git a/packages/fether-ui/src/Form/Form.js b/packages/fether-ui/src/Form/Form.js
new file mode 100644
index 0000000000000000000000000000000000000000..23344af4c93b1c9c66fce5c607158f51a3a082c9
--- /dev/null
+++ b/packages/fether-ui/src/Form/Form.js
@@ -0,0 +1,12 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import { Field } from './Field';
+import { Slider } from './Slider';
+
+export const Form = {
+ Field,
+ Slider
+};
diff --git a/packages/fether-ui/src/Form/Slider/Slider.js b/packages/fether-ui/src/Form/Slider/Slider.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e665b7d5cb8c1375f832e71b35c63756db5455c
--- /dev/null
+++ b/packages/fether-ui/src/Form/Slider/Slider.js
@@ -0,0 +1,24 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+
+import { Field } from '../Field';
+
+export const Slider = ({
+ centerText,
+ input,
+ leftText,
+ rightText,
+ ...otherProps
+}) => (
+
+
+
+);
diff --git a/packages/fether-ui/src/Form/Slider/index.js b/packages/fether-ui/src/Form/Slider/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ac776dd209cdc4ff0d47977fd3fb41386c97b7fe
--- /dev/null
+++ b/packages/fether-ui/src/Form/Slider/index.js
@@ -0,0 +1,6 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+export * from './Slider';
diff --git a/packages/fether-ui/src/Form/index.js b/packages/fether-ui/src/Form/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..45c4b207bf97cd174195eb7920627bd3da6d03a0
--- /dev/null
+++ b/packages/fether-ui/src/Form/index.js
@@ -0,0 +1,6 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+export * from './Form';
diff --git a/packages/fether-ui/src/FormField/FormField.js b/packages/fether-ui/src/FormField/FormField.js
deleted file mode 100644
index 44a4d16aab7ed5951977361596bb2350f9457453..0000000000000000000000000000000000000000
--- a/packages/fether-ui/src/FormField/FormField.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright 2015-2018 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-//
-// SPDX-License-Identifier: BSD-3-Clause
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const FormField = ({
- className,
- input: inputComponent,
- label,
- ...otherProps
-}) => (
-
-
- {inputComponent || }
-
-);
-
-FormField.propTypes = {
- className: PropTypes.string,
- input: PropTypes.node,
- label: PropTypes.string
-};
diff --git a/packages/fether-ui/src/index.js b/packages/fether-ui/src/index.js
index 99c5098268e63d44ad557b9f1f4726ae04e08923..2d1c5e9f5c8e8d14a583346f17a4685230a65dbb 100644
--- a/packages/fether-ui/src/index.js
+++ b/packages/fether-ui/src/index.js
@@ -7,7 +7,7 @@ export * from './AccountCard';
export * from './AccountHeader';
export * from './AddressShort';
export * from './Card';
-export * from './FormField';
+export * from './Form';
export * from './Header';
export * from './Placeholder';
export * from './TokenCard';