diff --git a/lerna.json b/lerna.json
index d8b5fb59..aacb290f 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.10.2",
+    "version": "0.11.0",
     "command": {
         "version": {
             "message": "chore(release): publish %s"
diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json
index fd5d4dc7..238ccf35 100644
--- a/packages/apsara-icons/package.json
+++ b/packages/apsara-icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.10.2",
+    "version": "0.11.0",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",
diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
index 7442fd3c..a646c9f4 100644
--- a/packages/apsara-ui/package.json
+++ b/packages/apsara-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.10.2",
+    "version": "0.11.0",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <praveen.yadav@go-jek.com>",
     "license": "Apache-2.0",
@@ -32,7 +32,8 @@
     "homepage": "https://goto.github.io/apsara/",
     "peerDependencies": {
         "react": "^16.13.1",
-        "react-dom": "^16.13.1"
+        "react-dom": "^16.13.1",
+        "react-hook-form": "7.43.1"
     },
     "dependencies": {
         "@ant-design/icons": "^4.2.2",
@@ -75,7 +76,9 @@
         "react-window": "^1.8.5",
         "react-window-infinite-loader": "^1.0.5",
         "styled-components": "^5.2.0",
-        "styled-system": "^5.1.5"
+        "styled-system": "^5.1.5",
+        "@hookform/error-message": "2.0.1",
+        "react-hook-form": "7.43.1"
     },
     "devDependencies": {
         "@rollup/plugin-json": "^4.1.0",
diff --git a/packages/apsara-ui/src/Checkbox/Checkbox.tsx b/packages/apsara-ui/src/Checkbox/Checkbox.tsx
index 56381aba..aa049171 100644
--- a/packages/apsara-ui/src/Checkbox/Checkbox.tsx
+++ b/packages/apsara-ui/src/Checkbox/Checkbox.tsx
@@ -2,6 +2,7 @@ import { CheckIcon } from "@radix-ui/react-icons";
 import React, { useEffect, useState } from "react";
 import { CheckboxWrapper, CheckboxGroupWrapper, StyledCheckbox, StyledIndicator } from "./Checkbox.styles";
 import { generateRandomId } from "../helper";
+import transformCheckedValue from "../helper/transform-checked-value";
 
 type CheckboxProps = {
     defaultChecked?: boolean;
@@ -29,6 +30,7 @@ type CheckboxGroupProps = {
     id?: string;
 };
 
+const prefixCls = "apsara-checkbox";
 const Checkbox = ({
     defaultChecked = false,
     checked,
@@ -48,11 +50,11 @@ const Checkbox = ({
     }, [checked]);
 
     return (
-        <CheckboxWrapper className="apsara-checkbox-wrapper">
+        <CheckboxWrapper className={`${prefixCls}-wrapper`}>
             <StyledCheckbox
                 defaultChecked={defaultChecked}
                 id={id}
-                checked={isChecked}
+                checked={isChecked || transformCheckedValue(value)}
                 onCheckedChange={
                     onChange ||
                     function (checked) {
@@ -64,6 +66,7 @@ const Checkbox = ({
                 name={name}
                 value={value}
                 style={style}
+                className={prefixCls}
             >
                 <StyledIndicator>
                     <CheckIcon style={{ width: "13px", height: "13px" }} />
@@ -95,7 +98,7 @@ const CheckboxGroup = ({
     };
 
     return (
-        <CheckboxGroupWrapper orientation={orientation} className="apsara-checkbox-group">
+        <CheckboxGroupWrapper orientation={orientation} className={`${prefixCls}-group`}>
             {options &&
                 options.map((option, index) => (
                     <div className="checkbox_label_wrapper" key={option.value}>
diff --git a/packages/apsara-ui/src/Combobox/Combobox.tsx b/packages/apsara-ui/src/Combobox/Combobox.tsx
index c2138f57..c237a4c9 100644
--- a/packages/apsara-ui/src/Combobox/Combobox.tsx
+++ b/packages/apsara-ui/src/Combobox/Combobox.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { SelectProps, OptGroup, Option } from "rc-select";
+import React, { forwardRef } from "react";
+import Select, { SelectProps, OptGroup, Option } from "rc-select";
 import { NotFoundContent, StyledMultiSelect } from "./Combobox.styles";
 import { useState } from "react";
 import Icon from "../Icon";
@@ -20,22 +20,23 @@ const loadingContent = (
     </NotFoundContent>
 );
 
-const Combobox = ({
-    options,
-    mode,
-    value,
-    onChange,
-    onSearch,
-    onSelect,
-    onDeselect,
-    allowClear = true,
-    showSearch = true,
-    showArrow = true,
-    filterOption = true,
-    placeholder,
-    optionFilterProp,
-    ...props
-}: SelectProps) => {
+const Combobox = forwardRef<Select<unknown>, SelectProps>((props, ref) => {
+    const {
+        options,
+        mode,
+        value,
+        onChange,
+        onSearch,
+        onSelect,
+        onDeselect,
+        allowClear = true,
+        showSearch = true,
+        showArrow = true,
+        filterOption = true,
+        placeholder,
+        optionFilterProp,
+        ...restProps
+    } = props;
     const [showInputIcon, setShowInputIcon] = useState(true);
     const [isValue, setIsValue] = useState(false);
     const [inputIcon, setInputIcon] = useState(ArrowIcon);
@@ -73,8 +74,8 @@ const Combobox = ({
 
     return (
         <StyledMultiSelect
-            notFoundContent={props.loading ? loadingContent : notFoundContent}
-            {...props}
+            notFoundContent={restProps.loading ? loadingContent : notFoundContent}
+            {...restProps}
             showInputIcon={showInputIcon || !allowClear}
             showSearch={showSearch}
             mode={mode}
@@ -93,13 +94,15 @@ const Combobox = ({
             filterOption={filterOption}
             optionFilterProp={optionFilterProp || "value"}
             animation="slide"
+            ref={ref}
         >
-            {props.children}
+            {restProps.children}
         </StyledMultiSelect>
     );
-};
+});
 
-Combobox.Option = Option;
-Combobox.OptGroup = OptGroup;
+Combobox.displayName = "Combobox";
 
-export default Combobox;
+const CompoundCombobox = Object.assign(Combobox, { Option, OptGroup });
+
+export default CompoundCombobox;
diff --git a/packages/apsara-ui/src/DatePicker/DatePicker.tsx b/packages/apsara-ui/src/DatePicker/DatePicker.tsx
index b25040bc..221247eb 100644
--- a/packages/apsara-ui/src/DatePicker/DatePicker.tsx
+++ b/packages/apsara-ui/src/DatePicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { forwardRef, useRef } from "react";
 import Picker from "rc-picker";
 import enUS from "rc-picker/lib/locale/en_US";
 import { CalendarOutlined, ClockCircleOutlined, CloseCircleFilled } from "@ant-design/icons/";
@@ -22,14 +22,15 @@ type DatePickerProps = {
 };
 
 const prefixCls = "apsara-picker";
-const DatePicker = ({
-    className,
-    picker = "date",
-    placeholder = picker == "date" ? "Select date" : "Select time",
-    generateConfig = momentGenerateConfig,
-    width = "100%",
-    ...props
-}: DatePickerProps) => {
+const DatePicker = forwardRef<null, DatePickerProps>((props, ref) => {
+    const {
+        className,
+        picker = "date",
+        placeholder = picker == "date" ? "Select date" : "Select time",
+        generateConfig = momentGenerateConfig,
+        width = "100%",
+        ...restProps
+    } = props;
     const datePickerDropdownWrapperRef = useRef<HTMLDivElement>(null);
 
     return (
@@ -40,7 +41,7 @@ const DatePicker = ({
                     suffixIcon={picker === "time" ? <ClockCircleOutlined /> : <CalendarOutlined />}
                     clearIcon={<CloseCircleFilled />}
                     allowClear
-                    {...props}
+                    {...restProps}
                     className={className}
                     prefixCls={prefixCls}
                     locale={enUS}
@@ -52,11 +53,14 @@ const DatePicker = ({
                     nextIcon={<span className={`${prefixCls}-next-icon`} />}
                     superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
                     superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                    ref={ref}
                 />
             </DatePickerWrapper>
             <PickerDropdownWrapper ref={datePickerDropdownWrapperRef} />
         </>
     );
-};
+});
+
+DatePicker.displayName = "DatePicker";
 
 export default DatePicker;
diff --git a/packages/apsara-ui/src/Input/Input.styles.tsx b/packages/apsara-ui/src/Input/Input.styles.tsx
index c6668ca2..7641b5f2 100644
--- a/packages/apsara-ui/src/Input/Input.styles.tsx
+++ b/packages/apsara-ui/src/Input/Input.styles.tsx
@@ -116,6 +116,7 @@ const StyledWrapper = styled("div")<{
 `;
 
 export const TextAreaWrapper = styled("div")<{ size?: "small" | "middle" | "large" }>`
+    display: flex;
     .input_textarea_main {
         width: 100%;
         border: 1px solid ${({ theme }) => theme?.input?.border};
diff --git a/packages/apsara-ui/src/Input/Input.tsx b/packages/apsara-ui/src/Input/Input.tsx
index a6242b9d..a495ba0d 100644
--- a/packages/apsara-ui/src/Input/Input.tsx
+++ b/packages/apsara-ui/src/Input/Input.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import StyledWrapper, { TextAreaWrapper } from "./Input.styles";
+import { PREFIX_CLS } from "./constants";
 
 export type InputProps = {
     size?: "small" | "middle" | "large";
@@ -12,44 +13,51 @@ type TextAreaProps = {
     size?: "small" | "middle" | "large";
 } & Omit<React.HTMLProps<HTMLTextAreaElement>, "size">;
 
-const Input = ({
-    suffix,
-    prefix,
-    placeholder = "",
-    allowClear = false,
-    size = "middle",
-    onChange,
-    type,
-    value,
-    ...props
-}: InputProps) => {
-    const [ref, setRef] = useState<HTMLInputElement | null>(null);
-    const renderClearButton = value && allowClear && !props.disabled;
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+    const {
+        suffix,
+        prefix,
+        placeholder = "",
+        allowClear = false,
+        size = "middle",
+        onChange,
+        type,
+        value,
+        ...restProps
+    } = props;
+    const localRef = useRef<HTMLInputElement>(null);
+    const renderClearButton = value && allowClear && !restProps.disabled;
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    useImperativeHandle(ref, () => localRef.current!, []);
 
     const onValueChange = (e: any) => {
         onChange && onChange(e);
     };
 
     return (
-        <StyledWrapper size={size} disabled={props.disabled} style={props.style} className={props.className}>
+        <StyledWrapper
+            size={size}
+            disabled={restProps.disabled}
+            style={restProps.style}
+            className={`${PREFIX_CLS} ${restProps.className || ""}`}
+        >
             {prefix != "" && prefix != null && <span className="input_suffix_prefix">{prefix}</span>}
             <div className="input_close_icon_wrapper">
                 <input
-                    ref={(input) => {
-                        setRef(input);
-                    }}
+                    ref={localRef}
                     onChange={onValueChange}
                     value={value}
                     type={type ? type : "text"}
                     placeholder={placeholder}
-                    {...props}
+                    {...restProps}
                     className="input_main"
                 />
                 {renderClearButton && (
                     <span
                         onClick={() => {
                             onValueChange({ target: { value: "" } });
-                            ref?.focus();
+                            localRef.current?.focus();
                         }}
                         className="input_close_icon"
                     >
@@ -58,21 +66,25 @@ const Input = ({
                 )}
             </div>
             {suffix != "" && suffix != null && <span className="input_suffix_prefix input_suffix">{suffix}</span>}
-            {props.children}
+            {restProps.children}
         </StyledWrapper>
     );
-};
+});
 
-const TextArea = ({ size = "middle", ...props }: TextAreaProps) => {
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
+    const { size = "middle", ...restProps } = props;
     return (
         <TextAreaWrapper size={size}>
-            <textarea {...props} className="input_textarea_main">
-                {props.children}
+            <textarea {...restProps} ref={ref} className={`${PREFIX_CLS}-text-area input_textarea_main`}>
+                {restProps.children}
             </textarea>
         </TextAreaWrapper>
     );
-};
+});
+
+TextArea.displayName = "TextArea";
+Input.displayName = "Input";
 
-Input.TextArea = TextArea;
+const CompoundInput = Object.assign(Input, { TextArea });
 
-export default Input;
+export default CompoundInput;
diff --git a/packages/apsara-ui/src/Input/constants/index.ts b/packages/apsara-ui/src/Input/constants/index.ts
new file mode 100644
index 00000000..cdea88d0
--- /dev/null
+++ b/packages/apsara-ui/src/Input/constants/index.ts
@@ -0,0 +1 @@
+export const PREFIX_CLS = "apsara-input";
diff --git a/packages/apsara-ui/src/Radio/Radio.tsx b/packages/apsara-ui/src/Radio/Radio.tsx
index 84347c5d..2c2961f6 100644
--- a/packages/apsara-ui/src/Radio/Radio.tsx
+++ b/packages/apsara-ui/src/Radio/Radio.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { RadioGroup, StyledRadioItem, StyledIndicator, Label, Flex, StyledRadioButton } from "./Radio.styles";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { generateRandomId } from "../helper";
+import { PREFIX_CLS } from "./constants";
 
-type RadioItem = {
+export type RadioItem = {
     label?: string;
     value: string;
     disabled?: boolean;
@@ -39,50 +40,44 @@ export type RadioProps = {
     id?: string;
 };
 
-const Radio = ({
-    defaultValue,
-    value,
-    items,
-    onChange,
-    required,
-    orientation,
-    dir,
-    id = generateRandomId(),
-    ...props
-}: RadioProps) => {
-    return (
-        <RadioGroup
-            defaultValue={defaultValue}
-            value={value}
-            onValueChange={onChange}
-            required={required}
-            orientation={orientation}
-            dir={dir}
-            className={props.className}
-            style={props.style}
-            aria-label="View density"
-        >
-            {items &&
-                items.map((item, i) => (
-                    <Flex dir={dir} key={item.value}>
-                        <StyledRadioItem
-                            value={item.value}
-                            disabled={item.disabled}
-                            required={item.required}
-                            {...props.itemStyle}
-                            id={`${id}${item.value}${i}`}
-                        >
-                            <StyledIndicator />
-                        </StyledRadioItem>
-                        <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
-                            {item.label}
-                        </Label>
-                    </Flex>
-                ))}
-            {!items && props.children}
-        </RadioGroup>
-    );
-};
+const Radio = forwardRef<HTMLInputElement, RadioProps>(
+    ({ defaultValue, value, items, onChange, required, orientation, dir, id = generateRandomId(), ...props }, ref) => {
+        return (
+            <RadioGroup
+                defaultValue={defaultValue}
+                value={value}
+                onValueChange={onChange}
+                required={required}
+                orientation={orientation}
+                dir={dir}
+                className={props.className}
+                style={props.style}
+                aria-label="View density"
+                ref={ref}
+            >
+                {items &&
+                    items.map((item, i) => (
+                        <Flex dir={dir} key={item.value}>
+                            <StyledRadioItem
+                                value={item.value}
+                                disabled={item.disabled}
+                                required={item.required}
+                                {...props.itemStyle}
+                                id={`${id}${item.value}${i}`}
+                                className={`${PREFIX_CLS} ${props.className ? props.className : ""}`}
+                            >
+                                <StyledIndicator />
+                            </StyledRadioItem>
+                            <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
+                                {item.label}
+                            </Label>
+                        </Flex>
+                    ))}
+                {!items && props.children}
+            </RadioGroup>
+        );
+    },
+);
 
 const RadioButton = ({ label, value, children, ...props }: RadioButtonType) => {
     return (
@@ -95,9 +90,13 @@ const RadioButton = ({ label, value, children, ...props }: RadioButtonType) => {
     );
 };
 
-Radio.Root = RadioGroup;
-Radio.Item = StyledRadioItem;
-Radio.Indicator = StyledIndicator;
-Radio.Button = RadioButton;
+Radio.displayName = "Radio";
+
+const CompoundRadio = Object.assign(Radio, {
+    Root: RadioGroup,
+    Item: StyledRadioItem,
+    Indicator: StyledIndicator,
+    Button: RadioButton,
+});
 
-export default Radio;
+export default CompoundRadio;
diff --git a/packages/apsara-ui/src/Radio/constants/index.ts b/packages/apsara-ui/src/Radio/constants/index.ts
new file mode 100644
index 00000000..fab46bb9
--- /dev/null
+++ b/packages/apsara-ui/src/Radio/constants/index.ts
@@ -0,0 +1 @@
+export const PREFIX_CLS = "apsara-radio";
diff --git a/packages/apsara-ui/src/Select/Select.tsx b/packages/apsara-ui/src/Select/Select.tsx
index c657a8c6..903b303b 100644
--- a/packages/apsara-ui/src/Select/Select.tsx
+++ b/packages/apsara-ui/src/Select/Select.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import {
     SelectRoot,
@@ -16,6 +16,7 @@ import {
     SelectScrollUpButton,
     SelectScrollDownButton,
 } from "./Select.styles";
+import { PREFIX_CLS } from "./constants";
 
 type Item = {
     value: string;
@@ -49,17 +50,18 @@ export type SelectProps = {
     itemProps?: StyleProps;
 };
 
-const Select = ({
-    defaultValue = "",
-    value,
-    name,
-    onChange,
-    groups,
-    defaultOpen = false,
-    open,
-    onOpenChange,
-    ...props
-}: SelectProps) => {
+const Select = forwardRef<HTMLButtonElement, SelectProps>((props, ref) => {
+    const {
+        defaultValue = "",
+        value,
+        name,
+        onChange,
+        groups,
+        defaultOpen = false,
+        open,
+        onOpenChange,
+        ...restProps
+    } = props;
     const lastInd = groups.length - 1;
     const [showDefaultItem, setShowDefaultItem] = useState(true);
 
@@ -87,14 +89,20 @@ const Select = ({
             open={open}
             onOpenChange={onOpenChange}
         >
-            <SelectTrigger {...props.triggerProps}>
+            <SelectTrigger
+                {...restProps.triggerProps}
+                className={`${PREFIX_CLS}-trigger ${
+                    restProps.triggerProps?.className ? restProps.triggerProps?.className : ""
+                }`}
+                ref={ref}
+            >
                 <SelectValue />
                 <SelectIcon>
                     <ChevronDownIcon />
                 </SelectIcon>
             </SelectTrigger>
-            <SelectContent {...props.contentProps}>
-                <SelectScrollUpButton {...props.scrollButtonProps}>
+            <SelectContent {...restProps.contentProps}>
+                <SelectScrollUpButton {...restProps.scrollButtonProps}>
                     <ChevronUpIcon />
                 </SelectScrollUpButton>
                 <SelectViewport>
@@ -116,7 +124,7 @@ const Select = ({
                                         key={item.value}
                                         value={item.value}
                                         disabled={item.disabled}
-                                        {...props.itemProps}
+                                        {...restProps.itemProps}
                                     >
                                         <SelectItemText>{item.displayText}</SelectItemText>
                                         <SelectItemIndicator>
@@ -126,16 +134,18 @@ const Select = ({
                                 ))}
                             </SelectGroup>
 
-                            {i != lastInd && <SelectSeparator {...props.separatorProps} />}
+                            {i != lastInd && <SelectSeparator {...restProps.separatorProps} />}
                         </div>
                     ))}
                 </SelectViewport>
-                <SelectScrollDownButton {...props.scrollButtonProps}>
+                <SelectScrollDownButton {...restProps.scrollButtonProps}>
                     <ChevronDownIcon />
                 </SelectScrollDownButton>
             </SelectContent>
         </SelectRoot>
     );
-};
+});
+
+Select.displayName = "Select";
 
 export default Select;
diff --git a/packages/apsara-ui/src/Select/constants/index.ts b/packages/apsara-ui/src/Select/constants/index.ts
new file mode 100644
index 00000000..358233c9
--- /dev/null
+++ b/packages/apsara-ui/src/Select/constants/index.ts
@@ -0,0 +1 @@
+export const PREFIX_CLS = "apsara-select";
diff --git a/packages/apsara-ui/src/Switch/Switch.tsx b/packages/apsara-ui/src/Switch/Switch.tsx
index f1a12ead..fbe90298 100644
--- a/packages/apsara-ui/src/Switch/Switch.tsx
+++ b/packages/apsara-ui/src/Switch/Switch.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { StyledSwitch, StyledThumb } from "./Switch.styles";
+import transformCheckedValue from "../helper/transform-checked-value";
 
 type StyleProps = {
     className?: string;
@@ -21,23 +22,25 @@ export type SwitchProps = {
     thumbProps?: StyleProps;
 };
 
-const Switch = ({
-    defaultChecked = false,
-    checked,
-    onChange,
-    disabled = false,
-    required,
-    name,
-    value,
-    color,
-    id,
-    ...props
-}: SwitchProps) => {
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
+    const {
+        defaultChecked = false,
+        checked,
+        onChange,
+        disabled = false,
+        required,
+        name,
+        value,
+        color,
+        id,
+        ...restProps
+    } = props;
+
     return (
         <StyledSwitch
             id={id}
             defaultChecked={defaultChecked}
-            checked={checked}
+            checked={checked || transformCheckedValue(value)}
             onCheckedChange={onChange}
             disabled={disabled}
             required={required}
@@ -46,10 +49,13 @@ const Switch = ({
             style={props.style}
             className={props.className}
             color={color}
+            ref={ref}
         >
-            <StyledThumb {...props.thumbProps} />
+            <StyledThumb {...restProps.thumbProps} />
         </StyledSwitch>
     );
-};
+});
+
+Switch.displayName = "Switch";
 
 export default Switch;
diff --git a/packages/apsara-ui/src/form-builder-v2/components/field/field.styles.ts b/packages/apsara-ui/src/form-builder-v2/components/field/field.styles.ts
new file mode 100644
index 00000000..ce1a0fe1
--- /dev/null
+++ b/packages/apsara-ui/src/form-builder-v2/components/field/field.styles.ts
@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+const errorColor = "#ef4444";
+
+const shakeAnimation = `
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    20%,
+    60% {
+      transform: translateX(-4px);
+    }
+    40%,
+    80% {
+      transform: translateX(4px);
+    }
+  }
+`;
+
+export const FieldWrapper = styled("div")<{ error?: boolean }>`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 20px;
+    .apsara-form-builder-v2-label-wrapper {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+    }
+    .apsara-form-builder-v2-label {
+        font-size: 12px;
+        text-transform: uppercase;
+    }
+    ${({ error }) =>
+        error
+            ? `
+                .apsara-input, .apsara-input:focus, .apsara-input:hover, .input_textarea_main, .input_textarea_main:focus, .input_textarea_main:hover, .rc-select-selector, .rc-select-selector:hover, .apsara-picker, .apsara-picker:hover, .apsara-input-number, .apsara-select-trigger, .apsara-radio:not(:disabled), .apsara-checkbox  {
+                    border: 1px solid ${errorColor};
+                }
+            `
+            : ""}
+`;
+
+export const ErrorMessage = styled("div")`
+    color: ${errorColor};
+    &::first-letter {
+        text-transform: capitalize;
+    }
+    &.shake {
+        animation: shake 0.4s ease-in-out;
+    }
+    ${shakeAnimation}
+`;
diff --git a/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx b/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx
new file mode 100644
index 00000000..80128fb2
--- /dev/null
+++ b/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx
@@ -0,0 +1,92 @@
+import React, { memo, ReactElement, ReactNode } from "react";
+import { useFormContext, useFormState, Controller, UseControllerProps } from "react-hook-form";
+import { ErrorMessage, FieldWrapper } from "./field.styles";
+import { PREFIX_CLS } from "../../constants";
+import withDefaultErrorMessage from "../../utils/default-error-message";
+import { ErrorMessage as ErrorMessageWrapper } from "@hookform/error-message";
+
+type ErrorAnimation = "shake" | "none";
+
+export interface FieldProps extends UseControllerProps {
+    label?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    errorAnimation?: ErrorAnimation;
+    children: ReactElement;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+const Field = (props: FieldProps) => {
+    const {
+        label,
+        prefix,
+        suffix,
+        children,
+        errorAnimation = "shake",
+        rules,
+        className,
+        style,
+        ...controllerProps
+    } = props;
+
+    const {
+        formState: { errors },
+        control,
+    } = useFormContext();
+    const { isSubmitting } = useFormState();
+
+    const enhancedRules = withDefaultErrorMessage(label || "", rules);
+    const error = errors[controllerProps.name];
+    const isFirstError = [...control._names.mount.values()].find((item) => errors[item]) === controllerProps.name;
+
+    return (
+        <FieldWrapper
+            error={Boolean(error?.message)}
+            className={`${PREFIX_CLS}-field ${className ? className : ""}`}
+            style={style}
+        >
+            {label && (
+                <div className={`${PREFIX_CLS}-label-wrapper`}>
+                    {prefix}
+                    <label className={`${PREFIX_CLS}-label`} htmlFor={controllerProps.name}>
+                        {label}
+                    </label>
+                    {suffix}
+                </div>
+            )}
+            <Controller
+                control={control}
+                rules={enhancedRules}
+                {...controllerProps}
+                render={({ field }) => (
+                    <>
+                        {React.cloneElement(children, {
+                            ...field,
+                            id: controllerProps.name,
+                        })}
+                    </>
+                )}
+            />
+            <ErrorMessageWrapper
+                errors={errors}
+                name={controllerProps.name}
+                render={({ message }) => {
+                    return (
+                        <>
+                            {message && !isSubmitting && (
+                                <ErrorMessage
+                                    className={`${PREFIX_CLS}-error-message ${isFirstError ? errorAnimation : ""}`}
+                                >
+                                    {message}
+                                </ErrorMessage>
+                            )}
+                        </>
+                    );
+                }}
+            />
+        </FieldWrapper>
+    );
+};
+
+export default memo(Field);
diff --git a/packages/apsara-ui/src/form-builder-v2/components/field/index.ts b/packages/apsara-ui/src/form-builder-v2/components/field/index.ts
new file mode 100644
index 00000000..d7bba537
--- /dev/null
+++ b/packages/apsara-ui/src/form-builder-v2/components/field/index.ts
@@ -0,0 +1 @@
+export { default } from "./field";
diff --git a/packages/apsara-ui/src/form-builder-v2/constants/index.ts b/packages/apsara-ui/src/form-builder-v2/constants/index.ts
new file mode 100644
index 00000000..53265837
--- /dev/null
+++ b/packages/apsara-ui/src/form-builder-v2/constants/index.ts
@@ -0,0 +1 @@
+export const PREFIX_CLS = "apsara-form-builder-v2";
diff --git a/packages/apsara-ui/src/form-builder-v2/form-builder-v2.stories.tsx b/packages/apsara-ui/src/form-builder-v2/form-builder-v2.stories.tsx
new file mode 100644
index 00000000..65c27a29
--- /dev/null
+++ b/packages/apsara-ui/src/form-builder-v2/form-builder-v2.stories.tsx
@@ -0,0 +1,154 @@
+import React from "react";
+import FormBuilderV2 from "./form-builder-v2";
+import { useForm } from "react-hook-form";
+import Input from "../Input";
+import Button from "../Button";
+import Radio from "../Radio";
+import Select from "../Select";
+import InputNumber from "../InputNumber";
+import DatePicker from "../DatePicker";
+import Combobox from "../Combobox";
+import Switch from "../Switch";
+import Checkbox from "../Checkbox";
+
+export default {
+    title: "Data Display/FormV2",
+    component: FormBuilderV2,
+};
+
+export interface MyFormValues {
+    name: string;
+    address: number;
+    agreement: boolean;
+}
+
+export const MyForm = () => {
+    const form = useForm<MyFormValues>();
+
+    const onSubmit = (data: MyFormValues) => {
+        console.log("Form Submitted:", data);
+    };
+
+    return (
+        <FormBuilderV2 form={form} onSubmit={onSubmit}>
+            <FormBuilderV2.Field label="Name" name="name" rules={{ required: true }}>
+                <Input allowClear placeholder="Your name" />
+            </FormBuilderV2.Field>
+            <FormBuilderV2.Field
+                label="Age"
+                name="age"
+                rules={{
+                    required: true,
+                    min: 8,
+                }}
+            >
+                <InputNumber placeholder="Your age" />
+            </FormBuilderV2.Field>
+            <FormBuilderV2.Field
+                label="Date birth"
+                name="date-birth"
+                rules={{ required: { value: true, message: "Date birth is required" } }}
+            >
+                <DatePicker showToday width="20%" />
+            </FormBuilderV2.Field>
+            <FormBuilderV2.Field
+                label="address"
+                name="address"
+                rules={{ required: { value: true, message: "address is required" } }}
+            >
+                <Input.TextArea rows={5} placeholder="Your address" />
+            </FormBuilderV2.Field>
+            <FormBuilderV2.Field
+                label="Choose your favorite fruit"
+                name="fruit"
+                rules={{ required: { value: true, message: "Fruit is required" } }}
+            >
+                <Radio
+                    items={[
+                        {
+                            label: "Apple",
+                            value: "Apple",
+                        },
+                        {
+                            label: "Pear",
+                            value: "Pear",
+                        },
+                        {
+                            disabled: true,
+                            label: "Orange",
+                            value: "Orange",
+                        },
+                    ]}
+                    orientation="horizontal"
+                />
+            </FormBuilderV2.Field>
+            <FormBuilderV2.Field
+                name="company"
+                label="Company"
+                rules={{ required: { value: true, message: "Company is required" } }}
+            >
+                <Select
+                    groups={[
+                        {
+                            items: [
+                                {
+                                    displayText: "Gojek",
+                                    value: "gojek",
+                                },
+                                {
+                                    displayText: "Gofood",
+                                    value: "gofood",
+                                },
+                                {
+                                    displayText: "Gosend",
+                                    value: "gosend",
+                                },
+                            ],
+                            label: "Fruit",
+                        },
+                    ]}
+                />
+            </FormBuilderV2.Field>
+            <FormBuilderV2.Field
+                label="Car"
+                name="car"
+                rules={{ required: { value: true, message: "Car is required" } }}
+            >
+                <Combobox
+                    allowClear
+                    mode="multiple"
+                    optionFilterProp="label"
+                    options={[
+                        {
+                            label: "Ford Raptor",
+                            value: "3",
+                        },
+                        {
+                            label: "Ferrari Testarossa",
+                            value: "4",
+                        },
+                        {
+                            label: "Porsche 911 Carrera",
+                            value: "5",
+                        },
+                    ]}
+                    placeholder="Please Select"
+                    showArrow
+                    showSearch
+                />
+            </FormBuilderV2.Field>
+            <FormBuilderV2.Field label="Dark mode" name="dark-mode" defaultValue={false}>
+                <Switch color="red" />
+            </FormBuilderV2.Field>
+            <FormBuilderV2.Field
+                name="agreement"
+                rules={{ required: { value: true, message: "Agreement T&C is required!" } }}
+            >
+                <Checkbox name="tnc_agreement" label="I agree to the Terms & Conditions." />
+            </FormBuilderV2.Field>
+            <Button style={{ marginTop: 60 }} htmlType="submit">
+                Submit
+            </Button>
+        </FormBuilderV2>
+    );
+};
diff --git a/packages/apsara-ui/src/form-builder-v2/form-builder-v2.tsx b/packages/apsara-ui/src/form-builder-v2/form-builder-v2.tsx
new file mode 100644
index 00000000..620298d6
--- /dev/null
+++ b/packages/apsara-ui/src/form-builder-v2/form-builder-v2.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+import { FieldValues, FormProvider, SubmitHandler, UseFormReturn } from "react-hook-form";
+import Field from "./components/field";
+import { PREFIX_CLS } from "./constants";
+
+interface FormBuilderProps<T extends FieldValues> {
+    children: ReactNode;
+    onSubmit: SubmitHandler<T>;
+    form: UseFormReturn<T>;
+}
+
+const FormBuilderV2 = <T extends FieldValues>({ children, onSubmit, form }: FormBuilderProps<T>) => {
+    return (
+        <FormProvider {...form}>
+            <form className={`${PREFIX_CLS}`} onSubmit={form.handleSubmit(onSubmit)}>
+                {children}
+            </form>
+        </FormProvider>
+    );
+};
+
+FormBuilderV2.Field = Field;
+
+export default FormBuilderV2;
diff --git a/packages/apsara-ui/src/form-builder-v2/index.ts b/packages/apsara-ui/src/form-builder-v2/index.ts
new file mode 100644
index 00000000..21267c66
--- /dev/null
+++ b/packages/apsara-ui/src/form-builder-v2/index.ts
@@ -0,0 +1 @@
+export { default } from "./form-builder-v2";
diff --git a/packages/apsara-ui/src/form-builder-v2/utils/default-error-message.tsx b/packages/apsara-ui/src/form-builder-v2/utils/default-error-message.tsx
new file mode 100644
index 00000000..4a7d8f41
--- /dev/null
+++ b/packages/apsara-ui/src/form-builder-v2/utils/default-error-message.tsx
@@ -0,0 +1,51 @@
+import { FieldValues, RegisterOptions } from "react-hook-form";
+
+const withDefaultErrorMessage = (
+    name: string,
+    rules?: Omit<RegisterOptions<FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">,
+) => {
+    return {
+        ...rules,
+        required: rules?.required
+            ? typeof rules.required === "boolean"
+                ? { value: true, message: `${name} is required!` }
+                : rules.required
+            : undefined,
+        min: rules?.min
+            ? typeof rules.min === "number"
+                ? { value: rules.min, message: `${name} must be at least ${rules.min}` }
+                : rules.min
+            : undefined,
+        max: rules?.max
+            ? typeof rules.max === "number"
+                ? { value: rules.max, message: `${name} must be at most ${rules.max}` }
+                : rules.max
+            : undefined,
+        minLength: rules?.minLength
+            ? typeof rules.minLength === "number"
+                ? {
+                      value: rules.minLength,
+                      message: `${name} must be at least ${rules.minLength} characters`,
+                  }
+                : rules.minLength
+            : undefined,
+        maxLength: rules?.maxLength
+            ? typeof rules.maxLength === "number"
+                ? {
+                      value: rules.maxLength,
+                      message: `${name} must be at most ${rules.maxLength} characters`,
+                  }
+                : rules.maxLength
+            : undefined,
+        pattern: rules?.pattern
+            ? rules.pattern instanceof RegExp
+                ? {
+                      value: rules.pattern,
+                      message: `${name} does not match the required pattern`,
+                  }
+                : rules.pattern
+            : undefined,
+    };
+};
+
+export default withDefaultErrorMessage;
diff --git a/packages/apsara-ui/src/helper/transform-checked-value.ts b/packages/apsara-ui/src/helper/transform-checked-value.ts
new file mode 100644
index 00000000..dc2cfab1
--- /dev/null
+++ b/packages/apsara-ui/src/helper/transform-checked-value.ts
@@ -0,0 +1,14 @@
+const transformCheckedValue = (value?: string | boolean | 0 | 1) => {
+    switch (typeof value) {
+        case "string":
+            return value === "true" ? true : false;
+        case "number":
+            return value === 1 ? true : false;
+        case "boolean":
+            return value;
+        default:
+            return false;
+    }
+};
+
+export default transformCheckedValue;
diff --git a/yarn.lock b/yarn.lock
index f7920f65..5d1958aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2609,6 +2609,11 @@
   resolved "https://registry.npmjs.org/@goto-company/icons/-/icons-0.1.0.tgz#11a9d6537d4bc19a432924f7a40c60a4d2dbfbcd"
   integrity sha512-8+gRNfxBQqMK40qwHCnROuc2SE39j0ypoUhkeDULhnWLDBMdg0giAKJRuumJM5Q2EISo54D/9mWc/bAvIFvIqA==
 
+"@hookform/error-message@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@hookform/error-message/-/error-message-2.0.1.tgz#6a37419106e13664ad6a29c9dae699ae6cd276b8"
+  integrity sha512-U410sAr92xgxT1idlu9WWOVjndxLdgPUHEB8Schr27C9eh7/xUnITWpCMF93s+lGiG++D4JnbSnrb5A21AdSNg==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -15385,6 +15390,11 @@ react-element-to-jsx-string@^14.3.4:
     is-plain-object "5.0.0"
     react-is "17.0.2"
 
+react-hook-form@7.43.1:
+  version "7.43.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.1.tgz#0d0d7822f3f7fc05ffc41d5f012b49b90fcfa0f0"
+  integrity sha512-+s3+s8LLytRMriwwuSqeLStVjRXFGxgjjx2jED7Z+wz1J/88vpxieRQGvJVvzrzVxshZ0BRuocFERb779m2kNg==
+
 react-infinite-scroll-hook@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-infinite-scroll-hook/-/react-infinite-scroll-hook-3.0.0.tgz#13b1b4f95769a75da9d615905f4cbf78ccebf1f1"