# FunctionSettings

FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.

```tsx
import {
  reactExtension,
  useApi,
  FunctionSettings,
  TextField,
  Section,
} from '@shopify/ui-extensions-react/admin';

export default reactExtension(
  'admin.settings.validation.render',
  async (api) => {
    // Use Direct API access to fetch initial
    // metafields from the server if we are
    // rendering against a pre-existing `Validation`
    const initialSettings = api.data.validation
      ? await fetchSettings(api.data.validation.id)
      : {};

    return <App settings={initialSettings} />;
});

function App({settings}) {
  const [value, setValue] = useState(settings);
  const [error, setError] = useState();

  const {applyMetafieldsChange} = useApi();

  return (
    <FunctionSettings
      onError={(errors) => {
        setError(errors[0]?.message);
      }}
    >
      <Section heading="Settings">
        <TextField
          label="Name"
          name="name"
          value={value}
          error={error}
          onChange={(value) => {
            setValue(value);
            setError(undefined);
            applyMetafieldsChange({
              type: 'updateMetafield',
              namespace: '$app:my_namespace',
              key: 'name',
              value,
              valueType: 'single_line_text_field',
            });
          }}
        />
      </Section>
    </FunctionSettings>
  );
}

```

```js
import {
  extension,
  FunctionSettings,
  TextField,
  Section,
} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.settings.validation.render',
  async (root, api) => {
    // Use Direct API access to fetch initial
    // metafields from the server if we are
    // rendering against a pre-existing `Validation`
    const initialSettings = api.data.validation
      ? await fetchSettings(api.data.validation.id)
      : {};

    const textField = root.createComponent(TextField, {
      value: initialSettings.name,
      label: 'Name',
      name: 'name',
      onChange(value) {
        textField.updateProps({value, error: undefined});
        api.applyMetafieldsChange({
          type: 'updateMetafield',
          namespace: '$app:my_namespace',
          key: 'name',
          value,
          valueType: 'single_line_text_field',
        });
      },
    });

    const section = root.createComponent(Section, {
      heading: 'Settings',
    });

    const settings = root.createComponent(FunctionSettings, {
      onError(errors) {
        textField.updateProps({error: errors[0]?.message});
      },
    });

    section.append(textField);
    settings.append(section);
  },
);

```

## FunctionSettingsProps

### FunctionSettingsProps

### id

value: `string`

A unique identifier for the form.

### onSave

value: `() => void | Promise<void>`

An optional callback function that will be run by the admin when the user
commits their changes in the admin-rendered part of the function settings
experience. If this function returns a promise, the admin will wait for the
promise to resolve before committing any changes to Shopify’s servers. If
the promise rejects, the admin will abort the changes and display an error,
using the `message` property of the error you reject with.

### onError

value: `(errors: FunctionSettingsError[]) => void`

  - FunctionSettingsError: export interface FunctionSettingsError {
  /**
   * A unique identifier describing the “class” of error. These will match
   * the GraphQL error codes as closely as possible. For example the enums
   * returned by the `metafieldsSet` mutation
   *
   * @see /docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode
   */
  code: string;

  /**
   * A translated message describing the error.
   */
  message: string;
}
An optional callback function that will be run by the admin when the
committing the changes to Shopify’s servers fails. The errors you receive
in the `errors` argument will only be those that were caused by data your
extension provided; network errors and user errors that are out of your
control will not be reported here.

In the `onError` callback, you should update your extension’s UI to
highlight the fields that caused the errors, and display the error messages
to the user.

### FunctionSettingsError

### code

value: `string`

A unique identifier describing the “class” of error. These will match
the GraphQL error codes as closely as possible. For example the enums
returned by the `metafieldsSet` mutation

### message

value: `string`

A translated message describing the error.

## Related

- [TextField](https://shopify.dev/docs/api/admin-extensions/components/forms/textfield)
- [NumberField](https://shopify.dev/docs/api/admin-extensions/components/forms/numberfield)
- [ChoiceList](https://shopify.dev/docs/api/admin-extensions/components/forms/choicelist)