diff --git a/packages/runtime/example/input-components/index.html b/packages/runtime/example/input-components/index.html
new file mode 100644
index 00000000..dd75228d
--- /dev/null
+++ b/packages/runtime/example/input-components/index.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+ meta-ui runtime example: input component
+
+
+
+
+
+
diff --git a/packages/runtime/src/components/chakra-ui/Input.tsx b/packages/runtime/src/components/chakra-ui/Input.tsx
new file mode 100644
index 00000000..ec67dcfc
--- /dev/null
+++ b/packages/runtime/src/components/chakra-ui/Input.tsx
@@ -0,0 +1,147 @@
+import React, { useEffect, useRef } from "react";
+import { Input as BaseInput, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement } from "@chakra-ui/react";
+import { createComponent } from "@meta-ui/core";
+import { Static, Type } from "@sinclair/typebox";
+import { ComponentImplementation } from "../../registry";
+
+
+const VariantPropertySchema = Type.KeyOf(
+ Type.Object({
+ outline: Type.String(),
+ unstyled: Type.String(),
+ filled: Type.String(),
+ flushed: Type.String()
+ })
+);
+
+const PlaceholderPropertySchema = Type.Optional(Type.String());
+
+const SizePropertySchema = Type.KeyOf(
+ Type.Object({
+ sm: Type.String(),
+ md: Type.String(),
+ lg: Type.String(),
+ xs: Type.String()
+ })
+);
+
+const FocusBorderColorPropertySchema = Type.Optional(Type.String());
+const IsDisabledPropertySchema = Type.Optional(Type.Boolean());
+const IsRequiredPropertySchema = Type.Optional(Type.Boolean());
+
+const AppendElementPropertySchema = Type.Union([
+ Type.Object({
+ type: Type.KeyOf(Type.Object({ addon: Type.String() })),
+ children: Type.Optional(Type.String()) // TODO: ReactNode
+ }),
+ Type.Object({
+ type: Type.KeyOf(Type.Object({ element: Type.String() })),
+ children: Type.Optional(Type.String()), // TODO: ReactNode
+ fontSize: Type.Optional(Type.String()),
+ color: Type.Optional(Type.String()),
+ })
+])
+
+const Input: ComponentImplementation<{
+ variant?: Static;
+ placeholder?: Static;
+ size?: Static;
+ focusBorderColor?: Static;
+ isDisabled?: Static;
+ isRequired?: Static;
+ left?: Static;
+ right?: Static;
+}> = ({
+ variant,
+ placeholder,
+ size,
+ focusBorderColor,
+ isDisabled,
+ isRequired,
+ left,
+ right,
+ mergeState
+}) => {
+ const [value, setValue] = React.useState(""); // TODO: number input and pin input
+ const onChange = (event: React.ChangeEvent) => setValue(event.target.value);
+
+ useEffect(() => {
+ mergeState({ value });
+ }, [value]);
+
+ return (
+
+ {left ? left.type === "addon"
+ ?
+ :
+ : <>
+ }
+
+ {right ? right.type === "addon"
+ ?
+ :
+ : <>}
+
+ );
+}
+
+const StateSchema = Type.Object({
+ value: Type.String(),
+});
+
+export default {
+ ...createComponent({
+ version: "chakra_ui/v1",
+ metadata: {
+ name: "input",
+ description: "chakra_ui input",
+ },
+ spec: {
+ properties: [
+ {
+ name: 'variant',
+ ...VariantPropertySchema
+ },
+ {
+ name: 'placeholder',
+ ...PlaceholderPropertySchema
+ },
+ {
+ name: 'size',
+ ...SizePropertySchema
+ },
+ {
+ name: 'focusBorderColor',
+ ...FocusBorderColorPropertySchema
+ },
+ {
+ name: 'isDisabled',
+ ...IsDisabledPropertySchema
+ },
+ {
+ name: 'isRequired',
+ ...IsRequiredPropertySchema
+ },
+ {
+ name: 'left',
+ ...AppendElementPropertySchema
+ },
+ {
+ name: 'right',
+ ...AppendElementPropertySchema
+ }
+ ],
+ acceptTraits: [],
+ state: StateSchema,
+ methods: [],
+ }
+ }),
+ impl: Input,
+}
\ No newline at end of file
diff --git a/packages/runtime/src/registry.tsx b/packages/runtime/src/registry.tsx
index 0c71d75d..ae9d9c7c 100644
--- a/packages/runtime/src/registry.tsx
+++ b/packages/runtime/src/registry.tsx
@@ -11,6 +11,7 @@ import ChakraUIRoot from "./components/chakra-ui/Root";
import ChakraUIButton from "./components/chakra-ui/Button";
import ChakraUITabs from "./components/chakra-ui/Tabs";
import ChakraUITable from "./components/chakra-ui/Table";
+import ChakraUIInput from "./components/chakra-ui/Input";
// traits
import CoreState from "./traits/core/state";
import CoreEvent from "./traits/core/event";
@@ -104,6 +105,7 @@ registry.registerComponent(ChakraUIRoot);
registry.registerComponent(ChakraUIButton);
registry.registerComponent(ChakraUITabs);
registry.registerComponent(ChakraUITable);
+registry.registerComponent(ChakraUIInput);
registry.registerTrait(CoreState);
registry.registerTrait(CoreEvent);