https://github.com/payloadcms/custom-field-guide
https://github.com/payloadcms/custom-field-guide
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/payloadcms/custom-field-guide
- Owner: payloadcms
- Created: 2021-06-25T19:58:43.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-06T00:06:56.000Z (11 months ago)
- Last Synced: 2025-04-01T22:24:15.176Z (3 months ago)
- Language: TypeScript
- Size: 639 KB
- Stars: 22
- Watchers: 4
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Custom Field Sample Project - Color Picker
This is an example Payload CMS project that has a custom color picker field and was created for the blog post [Building a Custom Field for Payload](https://payloadcms.com/blog/how-to-create-a-custom-select-field-in-payload-a-step-by-step-guide)
### Color Picker Field Features
- Payload compatible field configuration
- Custom input for admin panel
- Custom Cell component
- Input validation for frontend and backend
- User preferences that remember individual user's color choices
## Prerequisites:
- MongoDB
- Node
## Steps to run this project:
- git clone [email protected]:payloadcms/custom-field-guide.git
- `cp .env.example .env`
- edit `.env` file to have valid MongoDB connection
- `yarn` or `npm install`
- `yarn dev` or `npm run dev`
- after startup open web browser to localhost:3000/admin