Guide

Components

Native Custom Fields provides a variety of controls (field types) that you can use to build custom meta boxes for posts, terms, users, and options pages. Each component is designed to handle specific types of data and provide a consistent user interface within the WordPress admin area.

Component Overview

All components share a set of base parameters such as fieldType, name, fieldLabel, and required. Depending on the specific control, additional parameters are available to customize its behavior and appearance.

You can register these components using the following hooks:

  • native_custom_fields_post_meta_fields
  • native_custom_fields_term_meta_fields
  • native_custom_fields_user_meta_fields
  • native_custom_fields_options_page_fields

Available Components

Below is a list of all available field components. You can find detailed configuration references for each of these in their respective documentation files:

  • Alignment Matrix Control
  • Border Box Control
  • Border Control
  • Box Control
  • Checkbox Control
  • Color Palette Control
  • Color Picker Control
  • Combobox Control
  • Date Picker Control
  • Date Time Picker Control
  • External Link Control
  • File Upload Control
  • Font Size Control
  • Group Control
  • Heading Control
  • Input Control
  • Media Library Control
  • Notice Control
  • Number Control
  • Radio Control
  • Range Control
  • Repeater Control
  • Select Control
  • Text Control
  • Text Highlight Control
  • Textarea Control
  • Time Picker Control
  • Toggle Group Control
  • Token Field Control
  • Unit Control

Dynamic Options

The options parameter of the Select, Radio, Combobox and Toggle Group controls can be filled from WordPress data instead of a fixed list, using tokens such as {{posts?type=book}} or {{users}}. See Dynamic Options for the available tokens, their parameters, and how to search collections that are too large to fit in a single REST response.

Available Icons

WordPress components uses these icons:

  • add-card
  • add-submenu
  • add-template
  • align-center
  • align-justify
  • align-left
  • align-none
  • align-right
  • archive
  • arrow-down-left
  • arrow-down-right
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up-left
  • arrow-up-right
  • arrow-up
  • aspect-ratio
  • at-symbol
  • audio
  • background
  • backup
  • bell-unread
  • bell
  • block-default
  • block-meta
  • block-table
  • border
  • box
  • breadcrumbs
  • brush
  • bug
  • button
  • buttons
  • calendar
  • cancel-circle-filled
  • caption
  • capture-photo
  • capture-video
  • cart
  • category
  • caution-filled
  • caution
  • chart-bar
  • check
  • chevron-down-small
  • chevron-down
  • chevron-left-small
  • chevron-left
  • chevron-right-small
  • chevron-right
  • chevron-up-down
  • chevron-up-small
  • chevron-up
  • classic
  • close-small
  • close
  • cloud-download
  • cloud-upload
  • cloud
  • code
  • cog
  • color
  • column
  • columns
  • comment-author-avatar
  • comment-author-name
  • comment-content
  • comment-edit-link
  • comment-reply-link
  • comment
  • connection
  • copy-small
  • copy
  • corner-all
  • corner-bottom-left
  • corner-bottom-right
  • corner-top-left
  • corner-top-right
  • cover
  • create
  • crop
  • currency-dollar
  • currency-euro
  • currency-pound
  • custom-link
  • custom-post-type
  • dashboard
  • desktop
  • details
  • download
  • drafts
  • drag-handle
  • drawer-left
  • drawer-right
  • envelope
  • error
  • external
  • file
  • filter
  • flip-horizontal
  • flip-vertical
  • footer
  • format-bold
  • format-capitalize
  • format-indent-rtl
  • format-indent
  • format-italic
  • format-list-bullets-rtl
  • format-list-bullets
  • format-list-numbered-rtl
  • format-list-numbered
  • format-lowercase
  • format-ltr
  • format-outdent-rtl
  • format-outdent
  • format-rtl
  • format-strikethrough
  • format-underline
  • format-uppercase
  • fullscreen
  • funnel
  • gallery
  • gift
  • globe
  • grid
  • group
  • handle
  • header
  • heading-level-1
  • heading-level-2
  • heading-level-3
  • heading-level-4
  • heading-level-5
  • heading-level-6
  • heading
  • help-filled
  • help
  • home-button
  • home
  • html
  • image
  • inbox
  • info
  • insert-after
  • insert-before
  • institution
  • justify-bottom
  • justify-center-vertical
  • justify-center
  • justify-left
  • justify-right
  • justify-space-between-vertical
  • justify-space-between
  • justify-stretch-vertical
  • justify-stretch
  • justify-top
  • key
  • keyboard-close
  • keyboard-return
  • keyboard
  • language
  • layout
  • level-up
  • lifesaver
  • line-dashed
  • line-dotted
  • line-solid
  • link-off
  • link
  • list-item
  • list-view
  • list
  • lock-outline
  • lock-small
  • lock
  • login
  • loop
  • map-marker
  • math
  • media-and-text
  • media
  • megaphone
  • menu
  • mobile
  • more-horizontal
  • more-vertical
  • more
  • move-to
  • navigation
  • next
  • not-allowed
  • not-found
  • offline
  • overlay-text
  • page-break
  • page
  • pages
  • paragraph
  • payment
  • pencil
  • pending
  • people
  • percent
  • pin-small
  • pin
  • plugins
  • plus-circle-filled
  • plus-circle
  • plus
  • position-center
  • position-left
  • position-right
  • post-author
  • post-categories
  • post-comments-count
  • post-comments-form
  • post-comments
  • post-content
  • post-date
  • post-excerpt
  • post-featured-image
  • post-list
  • post-terms
  • post
  • preformatted
  • previous
  • published
  • pull-left
  • pull-right
  • pullquote
  • query-pagination-next
  • query-pagination-numbers
  • query-pagination-previous
  • query-pagination
  • quote
  • receipt
  • redo
  • remove-bug
  • remove-submenu
  • replace
  • reset
  • resize-corner-n-e
  • reusable-block
  • rotate-left
  • rotate-right
  • row
  • rss
  • scheduled
  • search
  • seen
  • send
  • separator
  • settings
  • shadow
  • share
  • shield
  • shipping
  • shortcode
  • shuffle
  • sidebar
  • sides-all
  • sides-axial
  • sides-bottom
  • sides-horizontal
  • sides-left
  • sides-right
  • sides-top
  • sides-vertical
  • site-logo
  • square
  • stack
  • star-empty
  • star-filled
  • star-half
  • store
  • stretch-full-width
  • stretch-wide
  • styles
  • subscript
  • superscript
  • swatch
  • symbol-filled
  • symbol
  • table-column-after
  • table-column-before
  • table-column-delete
  • table-of-contents
  • table-row-after
  • table-row-before
  • table-row-delete
  • table
  • tablet
  • tag
  • term-count
  • term-description
  • term-name
  • text-color
  • text-horizontal
  • text-vertical
  • thumbs-down
  • thumbs-up
  • time-to-read
  • tip
  • title
  • tool
  • trash
  • trending-down
  • trending-up
  • typography
  • undo
  • ungroup
  • unlock
  • unseen
  • update
  • upload
  • verse
  • video
  • widget
  • word-count
  • wordpress

Was this helpful?