Site & theme widget

Search Form

A search box, or a search icon that opens a full-screen search with live results.

Build it with your AI

“Add a search icon to the header that opens a full-screen search.”

Live demo

See it working

This is the real widget, not a picture

Settings

57 settings in three tabs

Every setting below is in the editor — and available to your AI through get_widget_schema.

Content

16 settings

Search

Layout

Placeholder

Field label

Show label

Button

Button text

Button icon

Search in

Live results

Number of results

Show featured images

Show excerpts

“See all results” link

Toggle icon

Toggle label

Alignment

Design

41 settings

Field

Max width

Height

Typography

Border radius

Padding

Text color

Placeholder color

Background

Border

Shadow

Border color

Focus ring

Label

Typography

Color

Spacing

Button

Typography

Icon size

Min width

Padding

Border radius

Space from the field

Text color

Background

Live results

Title typography

Background

Text color

Highlighted result

Border

Border radius

Shadow

Image size

Toggle icon

Size

Padding

Border radius

Color

Background

Overlay

Background

Text color

Form width

Input typography

Close button color

Behaviour

shared

On every element

Spacing & position

Background & border

Animations

Motion & effects

Scroll & mouse effects

Visibility

Conditions

Interactions

Attributes & CSS

Build it with AI

Just describe what you want

Your AI looks up the Search Form settings over MCP and writes the element for you — real, editable and on brand.

Claude · connected to your site

You

Add a search icon to the header that opens a full-screen search.

Claude · using Uncoder

Done — it’s on your site and fully editable.

  • Search Form added where you asked
  • Styled with your Design System
  • Checked on tablet and mobile
  • get_widget_schema
  • edit_elements
  • audit_page

What the AI writes

search-form.jsonJSON
{ "type": "search-form", "settings": {  } }

Free · GPL · No account

Your next site is one prompt away

Install Uncoder, connect your AI and describe what you want. Every page it builds stays yours to edit.