# Develop your app's field elements

Learn how to develop your app's field elements using the Hygraph App SDK tutorial. You will learn how to use the useFieldExtension hook to add a custom field.

To **create the element**, create a file inside `pages` and name it `custom-field.tsx` with the following content:

```jsx
import { Wrapper } from '@hygraph/app-sdk-react';

export default function CustomField() {
  return (
    <Wrapper>
      <label for="custom_field">Custom Field:</label>
      <input id="custom_field" placeholder="Type something here" type="text" />
    </Wrapper>
  );
}
```

In this example, you are naming the file `custom-field.tsx` because at the time of [registering the app](https://hygraph.com/docs/app-framework/first-steps/register-your-app#field-element) you used `http://localhost:3000/custom-field` as your `URL`.

**Warning:**

Please note that **Wrapper** should be the parent of your component whenever you use the `useFieldExtension` hook.

**Adding React SDK**

Let's import some SDK components, hooks and enumerations from Hygraph SDK.

Start with importing `useFieldExtension` hook from the library inside your React application.

You should add the following code at the top of the `custom-field.tsx` file, under the wrapper. Remember to import `useEffect` hook at the top.

```jsx
// Add this at the top of your custom-field.tsx file

import { useState, useEffect } from 'react';

import { Wrapper, useFieldExtension } from '@hygraph/app-sdk-react';
```

Then, add `useFieldExtension` hook into `MyField` and adjust the code accordingly, like the following example:

```jsx
function MyCustomField() {
  const { value, onChange } = useFieldExtension();
  const [localValue, setLocalValue] = useState(value || '');

  useEffect(() => {
    onChange(localValue);
  }, [localValue, onChange]);

  return (
    <>
      <label for="custom_field">Custom Field:</label>
      <input
        id="custom_field"
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)}
      />
    </>
  );
}
```

Finally, let's wrap our custom input field with the `Wrapper` component:

```jsx
export default function CustomField() {
  return (
    <Wrapper>
      <MyCustomField />
    </Wrapper>
  );
}
```

Your complete custom app element should look like this:

```jsx
// this is the complete code

import { useState, useEffect } from 'react';

import { Wrapper, useFieldExtension } from '@hygraph/app-sdk-react';

function MyCustomField() {
  const { value, onChange } = useFieldExtension();
  const [localValue, setLocalValue] = useState(value || '');

  useEffect(() => {
    onChange(localValue);
  }, [localValue, onChange]);

  return (
    <>
      <label for="custom_field">Custom Field:</label>
      <input
        id="custom_field"
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)}
      />
    </>
  );
}
export default function CustomField() {
  return (
    <Wrapper>
      <MyCustomField />
    </Wrapper>
  );
}
```

**Next steps:**

Congratulations! Now that you've registered and developed your app, you are ready to [install it](https://hygraph.com/docs/app-framework/app-installation) and try it out, if you didn't install it already while testing it!

You may also want to access more in depth information about the app registration process, along with all the options available as well as all possible actions you can take in the registration form. [Click here](https://hygraph.com/docs/app-framework/register-an-app) to know more.

If you have any questions, you're welcome to [join our community!](https://hygraph-community.slack.com/)