diff --git a/packages/fastui-bootstrap/src/index.tsx b/packages/fastui-bootstrap/src/index.tsx
index e828891e..225983b1 100644
--- a/packages/fastui-bootstrap/src/index.tsx
+++ b/packages/fastui-bootstrap/src/index.tsx
@@ -27,7 +27,7 @@ function displayPrimitiveRender(props: components.DisplayPrimitiveProps) {
   }
 }
 
-export const classNameGenerator: ClassNameGenerator = ({ props, fullPath, subElement }) => {
+export const classNameGenerator: ClassNameGenerator = ({ props, fullPath, subElement }): ClassName => {
   const { type } = props
   switch (type) {
     case 'Page':
@@ -52,78 +52,72 @@ export const classNameGenerator: ClassNameGenerator = ({ props, fullPath, subEle
       }
     case 'Form':
     case 'ModelForm':
-      return formClassName(subElement)
+      if (props.displayMode === 'inline') {
+        switch (subElement) {
+          case 'form-container':
+            return ''
+          default:
+            return 'row row-cols-lg-4 align-items-center justify-content-end'
+        }
+      } else {
+        switch (subElement) {
+          case 'form-container':
+            return 'row justify-content-center'
+          default:
+            return 'col-md-4'
+        }
+      }
     case 'FormFieldInput':
     case 'FormFieldCheckbox':
     case 'FormFieldSelect':
     case 'FormFieldSelectSearch':
     case 'FormFieldFile':
-      return formFieldClassName(props, subElement)
+      switch (subElement) {
+        case 'input':
+          return props.error ? 'is-invalid form-control' : 'form-control'
+        case 'select':
+          return 'form-select'
+        case 'select-react':
+          return ''
+        case 'label':
+          if (props.displayMode === 'inline') {
+            return 'visually-hidden'
+          } else {
+            return { 'form-label': true, 'fw-bold': props.required }
+          }
+        case 'error':
+          return 'invalid-feedback'
+        case 'description':
+          return 'form-text'
+        default:
+          return 'mb-3'
+      }
     case 'Navbar':
-      return navbarClassName(subElement)
+      switch (subElement) {
+        case 'contents':
+          return 'container'
+        case 'title':
+          return 'navbar-brand'
+        default:
+          return 'navbar navbar-expand-lg bg-body-tertiary'
+      }
     case 'Link':
-      return linkClassName(props, fullPath)
+      return {
+        active: pathMatch(props.active, fullPath),
+        'nav-link': props.mode === 'navbar' || props.mode === 'tabs',
+      }
     case 'LinkList':
-      return linkListClassName(props, subElement)
-  }
-}
-
-function formFieldClassName(props: components.FormFieldProps, subElement?: string): ClassName {
-  switch (subElement) {
-    case 'input':
-      return props.error ? 'is-invalid form-control' : 'form-control'
-    case 'select':
-      return 'form-select'
-    case 'select-react':
-      return ''
-    case 'label':
-      return { 'form-label': true, 'fw-bold': props.required }
-    case 'error':
-      return 'invalid-feedback'
-    case 'description':
-      return 'form-text'
-    default:
-      return 'mb-3'
-  }
-}
-
-function formClassName(subElement?: string): ClassName {
-  switch (subElement) {
-    case 'form-container':
-      return 'row justify-content-center'
-    default:
-      return 'col-md-4'
-  }
-}
-
-function navbarClassName(subElement?: string): ClassName {
-  switch (subElement) {
-    case 'contents':
-      return 'container'
-    case 'title':
-      return 'navbar-brand'
-    default:
-      return 'navbar navbar-expand-lg bg-body-tertiary'
-  }
-}
-
-function linkClassName(props: components.LinkProps, fullPath: string): ClassName {
-  return {
-    active: pathMatch(props.active, fullPath),
-    'nav-link': props.mode === 'navbar' || props.mode === 'tabs',
-  }
-}
-
-function linkListClassName(props: components.LinkListProps, subElement?: string): ClassName {
-  if (subElement === 'link-list-item' && props.mode) {
-    return 'nav-item'
-  }
-  switch (props.mode) {
-    case 'tabs':
-      return 'nav nav-underline'
-    case 'vertical':
-      return 'nav flex-column'
-    default:
-      return ''
+      if (subElement === 'link-list-item' && props.mode) {
+        return 'nav-item'
+      } else {
+        switch (props.mode) {
+          case 'tabs':
+            return 'nav nav-underline'
+          case 'vertical':
+            return 'nav flex-column'
+          default:
+            return ''
+        }
+      }
   }
 }
diff --git a/packages/fastui/src/components/FormField.tsx b/packages/fastui/src/components/FormField.tsx
index 71270958..d7c733cc 100644
--- a/packages/fastui/src/components/FormField.tsx
+++ b/packages/fastui/src/components/FormField.tsx
@@ -12,7 +12,9 @@ interface BaseFormFieldProps {
   locked: boolean
   error?: string
   description?: string
+  displayMode?: 'default' | 'inline'
   className?: ClassName
+  onChange?: () => void
 }
 
 export type FormFieldProps =
@@ -128,57 +130,82 @@ interface FormFieldSelectProps extends BaseFormFieldProps {
   initial?: string
   multiple?: boolean
   vanilla?: boolean
+  placeholder?: string
 }
 
 export const FormFieldSelectComp: FC<FormFieldSelectProps> = (props) => {
-  const { name, required, locked, options, multiple, initial, vanilla } = props
+  if (props.vanilla) {
+    return <FormFieldSelectVanillaComp {...props} />
+  } else {
+    return <FormFieldSelectReactComp {...props} />
+  }
+}
+
+export const FormFieldSelectVanillaComp: FC<FormFieldSelectProps> = (props) => {
+  const { name, required, locked, options, multiple, initial, placeholder, onChange } = props
 
   const className = useClassName(props)
   const classNameSelect = useClassName(props, { el: 'select' })
+  return (
+    <div className={className}>
+      <Label {...props} />
+      <select
+        id={inputId(props)}
+        className={classNameSelect}
+        defaultValue={initial}
+        multiple={multiple}
+        name={name}
+        required={required}
+        disabled={locked}
+        aria-describedby={descId(props)}
+        placeholder={placeholder}
+        onChange={() => onChange && onChange()}
+      >
+        {multiple ? null : <option></option>}
+        {options.map((option, i) => (
+          <SelectOptionComp key={i} option={option} />
+        ))}
+      </select>
+      <ErrorDescription {...props} />
+    </div>
+  )
+}
+
+export const FormFieldSelectReactComp: FC<FormFieldSelectProps> = (props) => {
+  const { name, required, locked, options, multiple, initial, placeholder, onChange } = props
+
+  const className = useClassName(props)
   const classNameSelectReact = useClassName(props, { el: 'select-react' })
-  if (vanilla) {
-    return (
-      <div className={className}>
-        <Label {...props} />
-        <select
-          id={inputId(props)}
-          className={classNameSelect}
-          defaultValue={initial}
-          multiple={multiple}
-          name={name}
-          required={required}
-          disabled={locked}
-          aria-describedby={descId(props)}
-        >
-          {multiple ? null : <option></option>}
-          {options.map((option, i) => (
-            <SelectOptionComp key={i} option={option} />
-          ))}
-        </select>
-        <ErrorDescription {...props} />
-      </div>
-    )
-  } else {
-    return (
-      <div className={className}>
-        <Label {...props} />
-        <Select
-          id={inputId(props)}
-          className={classNameSelectReact}
-          isMulti={multiple ?? false}
-          isClearable
-          defaultValue={findDefault(options, initial)}
-          name={name}
-          required={required}
-          isDisabled={locked}
-          options={options}
-          aria-describedby={descId(props)}
-          styles={styles}
-        />
-        <ErrorDescription {...props} />
-      </div>
-    )
+
+  const reactSelectOnChanged = () => {
+    // TODO this is a hack to wait for the input to be updated, can we do better?
+    setTimeout(() => {
+      onChange && onChange()
+    }, 50)
   }
+
+  return (
+    <div className={className}>
+      <Label {...props} />
+      <Select
+        id={inputId(props)}
+        classNamePrefix="fastui-react-select"
+        className={classNameSelectReact}
+        isMulti={multiple ?? false}
+        isClearable
+        defaultValue={findDefault(options, initial)}
+        name={name}
+        required={required}
+        isDisabled={locked}
+        options={options}
+        aria-describedby={descId(props)}
+        styles={styles}
+        placeholder={placeholder}
+        onChange={reactSelectOnChanged}
+      />
+      <ErrorDescription {...props} />
+    </div>
+  )
 }
 
 const SelectOptionComp: FC<{ option: SelectOption | SelectGroup }> = ({ option }) => {
@@ -214,10 +241,11 @@ interface FormFieldSelectSearchProps extends BaseFormFieldProps {
   debounce?: number
   initial?: SelectOption
   multiple?: boolean
+  placeholder?: string
 }
 
 export const FormFieldSelectSearchComp: FC<FormFieldSelectSearchProps> = (props) => {
-  const { name, required, locked, searchUrl, initial, multiple } = props
+  const { name, required, locked, searchUrl, initial, multiple, placeholder, onChange } = props
   const [isLoading, setIsLoading] = useState(false)
   const request = useRequest()
 
@@ -237,10 +265,18 @@ export const FormFieldSelectSearchComp: FC<FormFieldSelectSearchProps> = (props)
       })
   }, props.debounce ?? 300)
 
+  const reactSelectOnChanged = () => {
+    // TODO this is a hack to wait for the input to be updated, can we do better?
+    setTimeout(() => {
+      onChange && onChange()
+    }, 50)
+  }
+
   return (
     <div className={useClassName(props)}>
       <Label {...props} />
       <AsyncSelect
+        classNamePrefix="fastui-react-select"
         id={inputId(props)}
         className={useClassName(props, { el: 'select-react' })}
         isMulti={multiple ?? false}
@@ -256,6 +292,8 @@ export const FormFieldSelectSearchComp: FC<FormFieldSelectSearchProps> = (props)
         isLoading={isLoading}
         aria-describedby={descId(props)}
         styles={styles}
+        placeholder={placeholder}
+        onChange={reactSelectOnChanged}
       />
       <ErrorDescription {...props} />
     </div>
diff --git a/packages/fastui/src/components/form.tsx b/packages/fastui/src/components/form.tsx
index f268b31f..e7bbd7bb 100644
--- a/packages/fastui/src/components/form.tsx
+++ b/packages/fastui/src/components/form.tsx
@@ -1,8 +1,9 @@
-import { FC, FormEvent, useState } from 'react'
+import { FC, FormEvent, useContext, useState, useRef, useCallback } from 'react'
 
 import { ClassName, useClassName } from '../hooks/className'
 import { useFireEvent, AnyEvent } from '../events'
-import { useRequest } from '../tools'
+import { useRequest, RequestArgs } from '../tools'
+import { LocationContext } from '../hooks/locationContext'
 
 import { FastProps, AnyCompList } from './index'
 
@@ -11,8 +12,12 @@ import { FormFieldProps } from './FormField'
 
 interface BaseFormProps {
   formFields: FormFieldProps[]
+  initial?: Record<string, any>
   submitUrl: string
   footer?: boolean | FastProps[]
+  method?: 'GET' | 'GOTO' | 'POST'
+  displayMode?: 'default' | 'inline'
+  submitOnChange?: boolean
   className?: ClassName
 }
 
@@ -30,7 +35,8 @@ interface FormResponse {
 }
 
 export const FormComp: FC<FormProps | ModelFormProps> = (props) => {
-  const { formFields, submitUrl, footer } = props
+  const formRef = useRef<HTMLFormElement>(null)
+  const { formFields, initial, submitUrl, method, footer, displayMode, submitOnChange } = props
 
   // mostly equivalent to `<input disabled`
   const [locked, setLocked] = useState(false)
@@ -38,42 +44,92 @@ export const FormComp: FC<FormProps | ModelFormProps> = (props) => {
   const [error, setError] = useState<string | null>(null)
   const { fireEvent } = useFireEvent()
   const request = useRequest()
+  const { goto } = useContext(LocationContext)
+
+  const submit = useCallback(
+    async (formData: FormData) => {
+      setLocked(true)
+      setError(null)
+      setFieldErrors({})
+
+      if (method === 'GOTO') {
+        // this seems to work in common cases, but typescript doesn't like it
+        const query = new URLSearchParams(formData as any)
+        console.log(Object.fromEntries(query.entries()))
+        for (const [k, v] of query.entries()) {
+          console.log(k, v)
+          if (v === '') {
+            query.delete(k)
+          }
+        }
+        const queryStr = query.toString()
+        goto(queryStr === '' ? submitUrl : `${submitUrl}?${query}`)
+        setLocked(false)
+        return
+      }
 
-  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    setLocked(true)
-    setError(null)
-    setFieldErrors({})
-    const formData = new FormData(e.currentTarget)
-
-    const [status, data] = await request({ url: submitUrl, formData, expectedStatus: [200, 422] })
-    if (status === 200) {
-      if (data.type !== 'FormResponse') {
-        throw new Error(`Expected FormResponse, got ${JSON.stringify(data)}`)
+      const requestArgs: RequestArgs = { url: submitUrl, expectedStatus: [200, 422] }
+      if (method === 'GET') {
+        // as above with URLSearchParams
+        requestArgs.query = new URLSearchParams(formData as any)
+      } else {
+        requestArgs.formData = formData
       }
-      const { event } = data as FormResponse
-      fireEvent(event)
-    } else {
-      // status === 422
-      const errorResponse = data as ErrorResponse
-      const formErrors = errorResponse.detail.form
-      if (formErrors) {
-        setFieldErrors(Object.fromEntries(formErrors.map((e) => [locToName(e.loc), e.msg])))
+
+      const [status, data] = await request(requestArgs)
+      if (status === 200) {
+        if (data.type !== 'FormResponse') {
+          throw new Error(`Expected FormResponse, got ${JSON.stringify(data)}`)
+        }
+        const { event } = data as FormResponse
+        fireEvent(event)
       } else {
-        console.warn('Non-field error submitting form:', data)
-        setError('Error submitting form')
+        // status === 422
+        const errorResponse = data as ErrorResponse
+        const formErrors = errorResponse.detail.form
+        if (formErrors) {
+          setFieldErrors(Object.fromEntries(formErrors.map((e) => [locToName(e.loc), e.msg])))
+        } else {
+          console.warn('Non-field error submitting form:', data)
+          setError('Error submitting form')
+        }
       }
-    }
-    setLocked(false)
+      setLocked(false)
+    },
+    [goto, method, request, submitUrl, fireEvent],
+  )
+
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    await submit(formData)
   }
 
-  const fieldProps: FormFieldProps[] = formFields.map((formField) =>
-    Object.assign({}, formField, { error: fieldErrors[formField.name], locked }),
-  )
+  const onChange = useCallback(() => {
+    if (submitOnChange) {
+      const formData = new FormData(formRef.current!)
+      submit(formData)
+    }
+  }, [submitOnChange, submit])
+
+  const fieldProps: FormFieldProps[] = formFields.map((formField) => {
+    const f = {
+      ...formField,
+      error: fieldErrors[formField.name],
+      locked,
+      displayMode,
+      onChange,
+    } as FormFieldProps
+    const formInitial = initial && initial[formField.name]
+    if (formInitial !== undefined) {
+      ;(f as any).initial = formInitial
+    }
+    return f
+  })
 
   return (
     <div className={useClassName(props, { el: 'form-container' })}>
-      <form className={useClassName(props)} onSubmit={onSubmit}>
+      <form ref={formRef} className={useClassName(props)} onSubmit={onSubmit}>
         <AnyCompList propsList={fieldProps} />
         {error ? <div>Error: {error}</div> : null}
         <Footer footer={footer} />
diff --git a/packages/fastui/src/hooks/locationContext.tsx b/packages/fastui/src/hooks/locationContext.tsx
index 35ee49a6..a6a83a21 100644
--- a/packages/fastui/src/hooks/locationContext.tsx
+++ b/packages/fastui/src/hooks/locationContext.tsx
@@ -53,7 +53,9 @@ export function LocationProvider({ children }: { children: ReactNode }) {
 
   const pushPath = useCallback(
     (newPath: string): string => {
-      if (!newPath.startsWith('/')) {
+      if (newPath === '.' || newPath === '') {
+        newPath = stripQuery(fullPath)
+      } else if (!newPath.startsWith('/')) {
         // get rid of `.` and `./` at the beginning of the path
         if (newPath.startsWith('.')) {
           newPath = newPath.slice(1)
diff --git a/packages/fastui/src/tools.ts b/packages/fastui/src/tools.ts
index a06464fa..3eaae47d 100644
--- a/packages/fastui/src/tools.ts
+++ b/packages/fastui/src/tools.ts
@@ -2,11 +2,11 @@ import { useCallback, useContext, useEffect } from 'react'
 
 import { ErrorContext } from './hooks/error'
 
-export function useRequest(): (args: Request) => Promise<[number, any]> {
+export function useRequest(): (args: RequestArgs) => Promise<[number, any]> {
   const { setError } = useContext(ErrorContext)
 
   return useCallback(
-    async (args: Request) => {
+    async (args: RequestArgs) => {
       try {
         return await request(args)
       } catch (e) {
@@ -36,12 +36,12 @@ export function useSSE(url: string, onMessage: (data: any) => void): void {
   }, [url, setError, onMessage])
 }
 
-interface Request {
+export interface RequestArgs {
   url: string
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
   // defaults to 200
   expectedStatus?: number[]
-  query?: Record<string, string>
+  query?: Record<string, string> | URLSearchParams
   json?: Record<string, any>
   formData?: FormData
   headers?: Record<string, string>
@@ -65,7 +65,7 @@ async function request({
   json,
   expectedStatus,
   formData,
-}: Request): Promise<[number, any]> {
+}: RequestArgs): Promise<[number, any]> {
   const init: RequestInit = {}
 
   let contentType = null
diff --git a/python/demo/tables.py b/python/demo/tables.py
index 85f1f0bf..3e61bc09 100644
--- a/python/demo/tables.py
+++ b/python/demo/tables.py
@@ -2,11 +2,13 @@
 from functools import cache
 from pathlib import Path
 
+import pydantic
 from fastapi import APIRouter
 from fastui import AnyComponent, FastUI
 from fastui import components as c
 from fastui.components.display import DisplayLookup, DisplayMode
 from fastui.events import BackEvent, GoToEvent
+from fastui.forms import FormResponse
 from pydantic import BaseModel, Field, TypeAdapter
 
 from .shared import navbar
@@ -65,16 +67,32 @@ def cities_lookup() -> dict[id, City]:
     return {city.id: city for city in cities_list()}
 
 
+class FilterForm(pydantic.BaseModel):
+    country: str = Field(json_schema_extra={'search_url': '/api/search', 'placeholder': 'Filter by Country...'})
+
+
 @router.get('/cities', response_model=FastUI, response_model_exclude_none=True)
-def cities_view(page: int = 1) -> list[AnyComponent]:
+def cities_view(page: int = 1, country: str | None = None) -> list[AnyComponent]:
     cities = cities_list()
     page_size = 50
+    filter_form_initial = {}
+    if country:
+        cities = [city for city in cities if city.iso3 == country]
+        country_name = cities[0].country if cities else country
+        filter_form_initial['country'] = {'value': country, 'label': country_name}
     return [
         navbar(),
         c.PageTitle(text='FastUI Demo - Table'),
         c.Page(
             components=[
                 *heading('Cities'),
+                c.ModelForm[FilterForm](
+                    submit_url='.',
+                    initial=filter_form_initial,
+                    method='GOTO',
+                    submit_on_change=True,
+                    display_mode='inline',
+                ),
                 c.Table[City](
                     data=cities[(page - 1) * page_size : page * page_size],
                     columns=[
@@ -89,6 +107,11 @@ def cities_view(page: int = 1) -> list[AnyComponent]:
     ]
 
 
+@router.get('/cities/query', response_model=FormResponse, response_model_exclude_none=True)
+def cities_view(country: str) -> FormResponse:
+    return FormResponse(event=GoToEvent(url=f'/table/cities?country={country}'))
+
+
 @router.get('/cities/{city_id}', response_model=FastUI, response_model_exclude_none=True)
 def city_view(city_id: int) -> list[AnyComponent]:
     city = cities_lookup()[city_id]
diff --git a/python/fastui/components/__init__.py b/python/fastui/components/__init__.py
index eeea6435..2093783e 100644
--- a/python/fastui/components/__init__.py
+++ b/python/fastui/components/__init__.py
@@ -14,7 +14,16 @@
 from .. import class_name as _class_name
 from .. import events
 from .display import Details, Display
-from .forms import Form, FormField, ModelForm
+from .forms import (
+    Form,
+    FormField,
+    FormFieldCheckbox,
+    FormFieldFile,
+    FormFieldInput,
+    FormFieldSelect,
+    FormFieldSelectSearch,
+    ModelForm,
+)
 from .tables import Pagination, Table
 
 if typing.TYPE_CHECKING:
@@ -29,6 +38,11 @@
     'Button',
     'Modal',
     'ModelForm',
+    'FormFieldInput',
+    'FormFieldCheckbox',
+    'FormFieldFile',
+    'FormFieldSelect',
+    'FormFieldSelectSearch',
     'Form',
     'Table',
     'Display',
diff --git a/python/fastui/components/display.py b/python/fastui/components/display.py
index 137a1ede..495b3af7 100644
--- a/python/fastui/components/display.py
+++ b/python/fastui/components/display.py
@@ -60,7 +60,7 @@ class Display(DisplayBase, extra='forbid'):
 class Details(pydantic.BaseModel, typing.Generic[DataModel], extra='forbid'):
     data: DataModel
     fields: list[DisplayLookup] | None = None
-    class_name: _class_name.ClassName | None = None
+    class_name: _class_name.ClassName = None
     type: typing.Literal['Details'] = 'Details'
 
     @pydantic.model_validator(mode='after')
diff --git a/python/fastui/components/forms.py b/python/fastui/components/forms.py
index 3f35b056..30a63307 100644
--- a/python/fastui/components/forms.py
+++ b/python/fastui/components/forms.py
@@ -21,7 +21,7 @@ class BaseFormField(pydantic.BaseModel, ABC, defer_build=True):
     error: str | None = None
     locked: bool = False
     description: str | None = None
-    class_name: _class_name.ClassName | None = None
+    class_name: _class_name.ClassName = None
 
 
 class FormFieldInput(BaseFormField):
@@ -46,7 +46,8 @@ class FormFieldSelect(BaseFormField):
     options: list[forms.SelectOption] | list[forms.SelectGroup]
     multiple: bool | None = None
     initial: str | None = None
-    vanilla: bool | None = None
+    vanilla: bool | None = True
+    placeholder: str | None = None
     type: typing.Literal['FormFieldSelect'] = 'FormFieldSelect'
 
 
@@ -56,6 +57,7 @@ class FormFieldSelectSearch(BaseFormField):
     initial: forms.SelectOption | None = None
     # time in ms to debounce requests by, defaults to 300ms
     debounce: int | None = None
+    placeholder: str | None = None
     type: typing.Literal['FormFieldSelectSearch'] = 'FormFieldSelectSearch'
 
 
@@ -64,8 +66,20 @@ class FormFieldSelectSearch(BaseFormField):
 
 class BaseForm(pydantic.BaseModel, ABC, defer_build=True):
     submit_url: str = pydantic.Field(serialization_alias='submitUrl')
+    initial: dict[str, typing.Any] | None = None
+    method: typing.Literal['POST', 'GOTO', 'GET'] = 'POST'
+    display_mode: typing.Literal['default', 'inline'] | None = pydantic.Field(
+        default=None, serialization_alias='displayMode'
+    )
+    submit_on_change: bool | None = pydantic.Field(default=None, serialization_alias='submitOnChange')
     footer: bool | list[AnyComponent] | None = None
-    class_name: _class_name.ClassName | None = None
+    class_name: _class_name.ClassName = None
+
+    @pydantic.model_validator(mode='after')
+    def default_footer(self) -> typing.Self:
+        if self.footer is None and self.display_mode == 'inline':
+            self.footer = False
+        return self
 
 
 class Form(BaseForm):
diff --git a/python/fastui/components/tables.py b/python/fastui/components/tables.py
index 8a011ede..35ac9b23 100644
--- a/python/fastui/components/tables.py
+++ b/python/fastui/components/tables.py
@@ -15,7 +15,7 @@ class Table(pydantic.BaseModel, typing.Generic[DataModel], extra='forbid'):
     data: list[DataModel]
     columns: list[display.DisplayLookup] | None = None
     no_data_message: str | None = pydantic.Field(default=None, serialization_alias='noDataMessage')
-    class_name: _class_name.ClassName | None = None
+    class_name: _class_name.ClassName = None
     type: typing.Literal['Table'] = 'Table'
 
     @pydantic.model_validator(mode='after')
@@ -44,7 +44,7 @@ class Pagination(pydantic.BaseModel):
     page: int
     page_size: int
     total: int
-    class_name: _class_name.ClassName | None = None
+    class_name: _class_name.ClassName = None
     type: typing.Literal['Pagination'] = 'Pagination'
 
     @pydantic.computed_field(alias='pageCount')
diff --git a/python/fastui/json_schema.py b/python/fastui/json_schema.py
index f3f2eb9d..d67a246e 100644
--- a/python/fastui/json_schema.py
+++ b/python/fastui/json_schema.py
@@ -54,12 +54,14 @@ class JsonSchemaStringEnum(JsonSchemaBase, total=False):
     type: Required[Literal['string']]
     enum: Required[list[str]]
     default: str
+    placeholder: str
     enum_labels: dict[str, str]
 
 
 class JsonSchemaStringSearch(JsonSchemaBase, total=False):
     type: Required[Literal['string']]
     search_url: Required[str]
+    placeholder: str
     initial: SelectOption
 
 
@@ -102,6 +104,7 @@ class JsonSchemaArray(JsonSchemaBase, total=False):
     prefixItems: list[JsonSchemaAny]
     items: JsonSchemaAny
     search_url: str
+    placeholder: str
 
 
 JsonSchemaDefs = dict[str, JsonSchemaConcrete]
@@ -196,8 +199,9 @@ def json_schema_array_to_fields(
     items_schema = schema.get('items')
     if items_schema:
         items_schema, required = deference_json_schema(items_schema, defs, required)
-        if search_url := schema.get('search_url'):
-            items_schema['search_url'] = search_url  # type: ignore
+        for field_name in 'search_url', 'placeholder':
+            if value := schema.get(field_name):
+                items_schema[field_name] = value  # type: ignore
         if field := special_string_field(items_schema, loc_to_name(loc), title, required, True):
             return [field]
     raise NotImplementedError('todo')
@@ -232,6 +236,7 @@ def special_string_field(
                 search_url=search_url,
                 name=name,
                 title=title,
+                placeholder=schema.get('placeholder'),
                 required=required,
                 multiple=multiple,
                 initial=schema.get('initial'),