> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Regex

## Article: Regex

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/regex.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# Regex

A regular expression pattern supplied by the Wix user, stored as a string. Use it for a
field that validates other input against a pattern, such as a code format the Wix user defines
themselves. The value is the source text of a regular expression, for example
`'^[A-Z]{2}\d{3}$'`.

## Component

In your component code, import the `Regex` type from `@wix/editor-react-types`:

```ts
import type { Regex } from '@wix/editor-react-types';
```

At runtime it's a plain string:

```ts
type Regex = string
```

### Usage

Your code either consumes a value of type `Regex` or produces one:

::::tabs
:::Consumers
In a component that receives a `Regex`, compile it into a `RegExp` and test
input against it:

```tsx
import type { Regex } from '@wix/editor-react-types';

function CodeField({ validationPattern }: { validationPattern?: Regex }) {
  const isValid = (value: string) =>
    validationPattern ? new RegExp(validationPattern).test(value) : true;

  return <input onBlur={(event) => isValid(event.target.value)} />;
}
```
:::
:::Producers
When your code produces a `Regex`, for a context or a function return, assign
the source text of a regular expression:

```ts
import type { Regex } from '@wix/editor-react-types';

const validationPattern: Regex = '^[A-Z]{2}\\d{3}$';
```
:::
::::

## Manifest

In your manifest, declare the field with the `regex` dataType:

```json
{ "dataType": "regex" }
```

### Declaration

Declare a `regex` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should set the pattern in a panel. It takes
`dataType`, `displayName`, an optional `defaultValue`, and the optional text options that
follow:

```json
{
  "validationPattern": {
    "dataType": "regex",
    "displayName": "Validation Pattern",
    "defaultValue": "^[A-Z]{2}\\d{3}$",
    "text": {
      "maxLength": 100
    }
  }
}
```

#### Options

In the data property role, a regex field accepts the same options as the `Text` type,
grouped under a `text` key. These constrain the pattern string the Wix user types.

<PropertyList bordered>
  <Property
    name="minLength"
    description="The minimum number of characters allowed."
  />
  <Property
    name="maxLength"
    description="The maximum number of characters allowed."
  />
  <Property
    name="pattern"
    description="A regex that the typed value must match. Because a regex field's value is itself a regular expression, this constrains the shape of that regex. The pattern is capped at 100 characters."
  />
</PropertyList>
:::
:::Context-item
Declare it as a context item when your component supplies the pattern to descendant
components. It takes `dataType` and `displayName`:

```json
{
  "validationPattern": {
    "dataType": "regex",
    "displayName": "Validation Pattern"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a pattern. It takes
`dataType` and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "regex",
      "displayName": "Validation Pattern"
    }
  ],
  "returns": {
    "dataType": "regex"
  }
}
```
:::
::::