> 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: Primitive Data Types

## Article: Primitive Data Types

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/primitive-data-types.md

## Article Content:

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


# Primitive Data Types
Primitive data types are the building blocks for component data. They represent simple values like text, numbers, and booleans.

## Text

The `text` data type accepts string values with optional validation constraints. These ensure data quality and guide users toward valid input.

> **Note:** Specify these additional configurations under a `text` field in your [data item](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property name="maxLength" type="int32" description="Maximum number of characters allowed." />
  <Property name="minLength" type="int32" description="Minimum number of characters required." />
  <Property name="pattern" type="string" description="Regular expression pattern the text must match." />
</PropertyList>

> **Note:** If you set a `defaultValue`, it populates the panel's text input when the component is first added. If a Wix user then deletes the text, the field remains empty, it doesn't revert to the default.

### Example

A text field with validation constraints:

In the manifest:

```typescript
editorElement: {
  data: {
    username: {
      dataType: "text",
      displayName: "Username",
      defaultValue: "",
      text: {
        minLength: 3,
        maxLength: 20,
        pattern: "^[a-zA-Z0-9_]+$",  
      },
    },
  },
}
```

In the component:

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

interface UsernameProps {
  username?: Text;
}

const Username = ({ username }: UsernameProps) => <span>{username}</span>;
```

## Guid

The `guid` data type represents a globally unique identifier (GUID/UUID). No additional configuration is needed.

### Example

A GUID field for unique identification:

In the manifest:

```typescript
editorElement: {
  data: {
    recordId: {
      dataType: "guid",
      displayName: "Record ID",
      defaultValue: "550e8400-e29b-41d4-a716-446655440000",
    },
  },
}
```

In the component:

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

interface RecordProps {
  recordId?: Guid;
}

const Record = ({ recordId }: RecordProps) => <span>{recordId}</span>;
```

## Number
The `number` data type accepts numeric values with optional validation constraints. Useful for ensuring values stay within acceptable ranges.

> **Note:** Specify these additional configurations under a `number` field in your [data item](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property name="min" type="string" description="Minimum allowed value." />
  <Property name="max" type="string" description="Maximum allowed value." />
  <Property name="multiplier" type="string" description="Multiplier applied to the value." />
</PropertyList>

All 3 fields are optional, and all 3 take strings rather than numbers. Set them when the value has a meaningful range, so the editor can render a bounded control instead of an open number input.

> **Note:** These constraints and the item's `defaultValue` configure the editor panel. They don't reach your component. Give every numeric prop a default in your component code, so it has a value to render before a Wix user sets one. For more information, see [Default values and runtime fallbacks](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#default-values-and-runtime-fallbacks).

### Example

A rating field with min and max constraints:

In the manifest:

```typescript
editorElement: {
  data: {
    rating: {
      displayName: "Rating", 
      dataType: "number",
      defaultValue: 3,
      number: {
        min: '1',
        max: '5',
      },
    },
  },
}
```

In the component:

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

interface RatingProps {
  rating?: NumberType;
}

const Rating = ({ rating }: RatingProps) => <span>{rating} / 5</span>;
```

## Boolean value

The `booleanValue` data type represents true or false values. 

### Example

A feature toggle field:

In the manifest:

```typescript
editorElement: {
  data: {
    isEnabled: {
      dataType: "booleanValue",
      displayName: "Enable Feature",
      defaultValue: true,
    },
  },
}
```

In the component:

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

interface FeatureProps {
  isEnabled?: BooleanValue;
}

const Feature = ({ isEnabled }: FeatureProps) => (
  <div className={isEnabled ? 'enabled' : 'disabled'} />
);
```

## See also

- [Data Overview](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md)
- [Text Variations](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/text-variations.md)
- [Date and Time Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/date-and-time-types.md)
- [Contact Information Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/contact-information-types.md)
- [Media Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/media-data-types.md)