# Interfaces
Interfaces are the individual blocks that allow editing and viewing individual pieces of data. They
can be seen as the individual fields in a form, where the field is a single column in a table.

## Defining interfaces
Interfaces need to be defined through the `defineInterface` function. This allows the interface to
register things like it's name and options.

```js
export default defineInterface({
	id: 'text-input',
	register: ({ i18n }) => ({
		name: i18n.t('text-input'),
		icon: 'box',
		component: InterfaceTextInput
	})
});
```

### `id`
Unique ID for the interface within the platform. This is not shown to the end user, but is used
internally to build up forms and layouts.

### `register`
Callback function that allows the interface to register it's options and other user-facing parameters.

The one parameter that the register function gets is `context`. Context holds the following properties:

| Property | Description                                                                                             |
|----------|---------------------------------------------------------------------------------------------------------|
| `i18n`   | The internal vue-i18n instance. Can be used to return a translated name or translated interface options |

#### `name`
The user-facing name of the interface. By using the `i18n` handler from context, you can make this
localized.

#### `icon`
The icon that's shown when refering to this interface. It's most prominent usage is in the field-setup
wizard.

#### `component`
The Vue component that makes up the input of the interface. This is the component that will be rendered
in the edit form.
