diff --git a/packages/fastui/src/components/FormField.tsx b/packages/fastui/src/components/FormField.tsx
index f21e33f2..93b75c8d 100644
--- a/packages/fastui/src/components/FormField.tsx
+++ b/packages/fastui/src/components/FormField.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 
-import { ClassName, useClassNameGenerator } from '../hooks/className'
+import { ClassName, useClassName } from '../hooks/className'
 
 interface BaseFormFieldProps {
   name: string
@@ -8,6 +8,7 @@ interface BaseFormFieldProps {
   required: boolean
   locked: boolean
   error?: string
+  description?: string
   className?: ClassName
 }
 
@@ -17,27 +18,29 @@ interface FormFieldInputProps extends BaseFormFieldProps {
   type: 'FormFieldInput'
   htmlType?: 'text' | 'date' | 'datetime-local' | 'time' | 'email' | 'url' | 'file' | 'number'
   initial?: string | number
+  placeholder?: string
 }
 
 export const FormFieldInputComp: FC<FormFieldInputProps> = (props) => {
-  const { className, name, title, required, htmlType, locked } = props
+  const { name, placeholder, required, htmlType, locked } = props
   const [value, setValue] = useState(props.initial ?? '')
 
-  // TODO placeholder
   return (
-    <div className={useClassNameGenerator(className, props)}>
-      <label htmlFor={name}>
-        <Title title={title} />
-      </label>
+    <div className={useClassName(props)}>
+      <Label {...props} />
       <input
         type={htmlType}
+        className={useClassName(props, { el: 'input' })}
         value={value}
         onChange={(e) => setValue(e.target.value)}
+        id={inputId(props)}
         name={name}
         required={required}
         disabled={locked}
+        placeholder={placeholder}
+        aria-describedby={descId(props)}
       />
-      {props.error ? <div>Error: {props.error}</div> : null}
+      <ErrorDescription {...props} />
     </div>
   )
 }
@@ -48,14 +51,22 @@ interface FormFieldCheckboxProps extends BaseFormFieldProps {
 }
 
 export const FormFieldCheckboxComp: FC<FormFieldCheckboxProps> = (props) => {
-  const { className, name, title, required, locked } = props
+  const { name, required, locked } = props
+
   return (
-    <div className={useClassNameGenerator(className, props)}>
-      <label htmlFor={name}>
-        <Title title={title} />
-      </label>
-      <input type="checkbox" defaultChecked={!!props.initial} name={name} required={required} disabled={locked} />
-      {props.error ? <div>Error: {props.error}</div> : null}
+    <div className={useClassName(props)}>
+      <Label {...props} />
+      <input
+        type="checkbox"
+        className={useClassName(props, { el: 'input' })}
+        defaultChecked={!!props.initial}
+        id={inputId(props)}
+        name={name}
+        required={required}
+        disabled={locked}
+        aria-describedby={descId(props)}
+      />
+      <ErrorDescription {...props} />
     </div>
   )
 }
@@ -67,20 +78,21 @@ interface FormFieldSelectProps extends BaseFormFieldProps {
 }
 
 export const FormFieldSelectComp: FC<FormFieldSelectProps> = (props) => {
-  const { className, name, title, required, locked, choices } = props
+  const { name, required, locked, choices } = props
   const [value, setValue] = useState(props.initial ?? '')
 
   return (
-    <div className={useClassNameGenerator(className, props)}>
-      <label htmlFor={name}>
-        <Title title={title} />
-      </label>
+    <div className={useClassName(props)}>
+      <Label {...props} />
       <select
+        id={inputId(props)}
+        className={useClassName(props, { el: 'select' })}
         value={value}
         onChange={(e) => setValue(e.target.value)}
         name={name}
         required={required}
         disabled={locked}
+        aria-describedby={descId(props)}
       >
         <option></option>
         {choices.map(([value, label]) => (
@@ -89,7 +101,7 @@ export const FormFieldSelectComp: FC<FormFieldSelectProps> = (props) => {
           </option>
         ))}
       </select>
-      {props.error ? <div>Error: {props.error}</div> : null}
+      <ErrorDescription {...props} />
     </div>
   )
 }
@@ -101,27 +113,54 @@ interface FormFieldFileProps extends BaseFormFieldProps {
 }
 
 export const FormFieldFileComp: FC<FormFieldFileProps> = (props) => {
-  const { className, name, title, required, locked, multiple, accept } = props
+  const { name, required, locked, multiple, accept } = props
 
   return (
-    <div className={useClassNameGenerator(className, props)}>
-      <label htmlFor={name}>
-        <Title title={title} />
-      </label>
-      <input type="file" name={name} required={required} disabled={locked} multiple={multiple} accept={accept} />
-      {props.error ? <div>Error: {props.error}</div> : null}
+    <div className={useClassName(props)}>
+      <Label {...props} />
+      <input
+        type="file"
+        className={useClassName(props, { el: 'input' })}
+        id={inputId(props)}
+        name={name}
+        required={required}
+        disabled={locked}
+        multiple={multiple}
+        accept={accept}
+      />
+      <ErrorDescription {...props} />
     </div>
   )
 }
 
-const Title: FC<{ title: string[] }> = ({ title }) => {
+const Label: FC<FormFieldProps> = (props) => {
+  const { title } = props
   return (
-    <>
+    <label htmlFor={inputId(props)} className={useClassName(props, { el: 'label' })}>
       {title.map((t, i) => (
         <span key={i}>
           {i > 0 ? <> &rsaquo;</> : null} {t}
         </span>
       ))}
+    </label>
+  )
+}
+
+const inputId = (props: FormFieldProps) => `form-field-${props.name}`
+const descId = (props: FormFieldProps) => (props.description ? `${inputId(props)}-desc` : undefined)
+
+const ErrorDescription: FC<FormFieldProps> = (props) => {
+  const { description, error } = props
+  const descClassName = useClassName(props, { el: 'description' })
+  const errorClassName = useClassName(props, { el: 'error' })
+  return (
+    <>
+      {description ? (
+        <div id={descId(props)} className={descClassName}>
+          {description}
+        </div>
+      ) : null}
+      {error ? <div className={errorClassName}>Error: {error}</div> : null}
     </>
   )
 }
diff --git a/packages/fastui/src/components/Json.tsx b/packages/fastui/src/components/Json.tsx
index 6042b73c..f4eb796f 100644
--- a/packages/fastui/src/components/Json.tsx
+++ b/packages/fastui/src/components/Json.tsx
@@ -1,10 +1,13 @@
 import { FC } from 'react'
 
+import { ClassName } from '../hooks/className'
+
 export type JsonData = string | number | boolean | null | JsonData[] | { [key: string]: JsonData }
 
 export interface JsonProps {
   value: JsonData
   type: 'JSON'
+  className?: ClassName
 }
 
 export const JsonComp: FC<JsonProps> = ({ value }) => {
diff --git a/packages/fastui/src/components/button.tsx b/packages/fastui/src/components/button.tsx
index 4e47f106..b10db838 100644
--- a/packages/fastui/src/components/button.tsx
+++ b/packages/fastui/src/components/button.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { ClassName, useClassNameGenerator } from '../hooks/className'
+import { ClassName, useClassName } from '../hooks/className'
 import { useFireEvent, PageEvent, GoToEvent } from '../hooks/event'
 
 export interface ButtonProps {
@@ -12,12 +12,12 @@ export interface ButtonProps {
 }
 
 export const ButtonComp: FC<ButtonProps> = (props) => {
-  const { className, text, onClick, htmlType } = props
+  const { text, onClick, htmlType } = props
 
   const { fireEvent } = useFireEvent()
 
   return (
-    <button className={useClassNameGenerator(className, props)} type={htmlType} onClick={() => fireEvent(onClick)}>
+    <button className={useClassName(props)} type={htmlType} onClick={() => fireEvent(onClick)}>
       {text}
     </button>
   )
diff --git a/packages/fastui/src/components/div.tsx b/packages/fastui/src/components/div.tsx
index 6d1d8084..91c80b95 100644
--- a/packages/fastui/src/components/div.tsx
+++ b/packages/fastui/src/components/div.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { ClassName, useClassNameGenerator } from '../hooks/className'
+import { ClassName, useClassName } from '../hooks/className'
 
 import { FastProps, RenderChildren } from './index'
 
@@ -38,7 +38,7 @@ interface Props {
 }
 
 export const DivComp: FC<Props> = (props) => (
-  <div className={useClassNameGenerator(props.className, props)}>
+  <div className={useClassName(props)}>
     <RenderChildren children={props.children} />
   </div>
 )
diff --git a/packages/fastui/src/components/form.tsx b/packages/fastui/src/components/form.tsx
index 0d5398e3..da6fc0de 100644
--- a/packages/fastui/src/components/form.tsx
+++ b/packages/fastui/src/components/form.tsx
@@ -1,6 +1,6 @@
 import { FC, FormEvent, useState } from 'react'
 
-import { ClassName, useClassNameGenerator } from '../hooks/className'
+import { ClassName, useClassName } from '../hooks/className'
 import { useFireEvent, PageEvent, GoToEvent } from '../hooks/event'
 import { request } from '../tools'
 
@@ -30,7 +30,7 @@ interface FormResponse {
 }
 
 export const FormComp: FC<FormProps | ModelFormProps> = (props) => {
-  const { className, formFields, submitUrl, footer } = props
+  const { formFields, submitUrl, footer } = props
 
   // mostly equivalent to `<input disabled`
   const [locked, setLocked] = useState(false)
@@ -71,7 +71,7 @@ export const FormComp: FC<FormProps | ModelFormProps> = (props) => {
   )
 
   return (
-    <form className={useClassNameGenerator(className, props)} onSubmit={onSubmit}>
+    <form className={useClassName(props)} onSubmit={onSubmit}>
       <RenderChildren children={fieldProps} />
       {error ? <div>Error: {error}</div> : null}
       <Footer footer={footer} />
diff --git a/packages/fastui/src/components/heading.tsx b/packages/fastui/src/components/heading.tsx
index cc68a1e5..43916503 100644
--- a/packages/fastui/src/components/heading.tsx
+++ b/packages/fastui/src/components/heading.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { ClassName, useClassNameGenerator } from '../hooks/className'
+import { ClassName, useClassName } from '../hooks/className'
 
 export interface HeadingProps {
   type: 'Heading'
@@ -10,12 +10,12 @@ export interface HeadingProps {
 }
 
 export const HeadingComp: FC<HeadingProps> = (props) => {
-  const { level, text, className } = props
+  const { level, text } = props
   const HeadingComponent = getComponent(level)
-  return <HeadingComponent text={text} className={useClassNameGenerator(className, props)} />
+  return <HeadingComponent text={text} className={useClassName(props)} />
 }
 
-function getComponent(level: 1 | 2 | 3 | 4 | 5 | 6): FC<{ text: string; className: string }> {
+function getComponent(level: 1 | 2 | 3 | 4 | 5 | 6): FC<{ text: string; className?: string }> {
   switch (level) {
     case 1:
       return ({ text, className }) => <h1 className={className}>{text}</h1>
diff --git a/packages/fastui/src/components/index.tsx b/packages/fastui/src/components/index.tsx
index 37623a59..a0a58f00 100644
--- a/packages/fastui/src/components/index.tsx
+++ b/packages/fastui/src/components/index.tsx
@@ -36,6 +36,8 @@ export type FastProps =
   | AllDisplayProps
   | JsonProps
 
+export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps>
+
 export const AnyComp: FC<FastProps> = (props) => {
   const { DisplayError } = useContext(ErrorContext)
 
diff --git a/packages/fastui/src/components/link.tsx b/packages/fastui/src/components/link.tsx
index e8e1d912..ad443f91 100644
--- a/packages/fastui/src/components/link.tsx
+++ b/packages/fastui/src/components/link.tsx
@@ -1,6 +1,6 @@
 import { FC, MouseEventHandler, ReactNode } from 'react'
 
-import { ClassName, useClassNameGenerator } from '../hooks/className'
+import { ClassName, useClassName } from '../hooks/className'
 import { useFireEvent, PageEvent, GoToEvent } from '../hooks/event'
 
 import { FastProps, RenderChildren } from './index'
@@ -13,7 +13,7 @@ export interface LinkProps {
 }
 
 export const LinkComp: FC<LinkProps> = (props) => (
-  <LinkRender className={useClassNameGenerator(props.className, props)} onClick={props.onClick}>
+  <LinkRender className={useClassName(props)} onClick={props.onClick}>
     <RenderChildren children={props.children} />
   </LinkRender>
 )
diff --git a/packages/fastui/src/components/modal.tsx b/packages/fastui/src/components/modal.tsx
index d80bb5e2..b0269b46 100644
--- a/packages/fastui/src/components/modal.tsx
+++ b/packages/fastui/src/components/modal.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { ClassName, renderClassName, useClassNameGenerator } from '../hooks/className'
+import { ClassName, renderClassName, useClassName } from '../hooks/className'
 import { PageEvent, useEventListenerToggle } from '../hooks/event'
 
 import { FastProps, RenderChildren } from './index'
@@ -17,13 +17,13 @@ export interface ModalProps {
 }
 
 export const ModalComp: FC<ModalProps> = (props) => {
-  const { title, body, footer, openTrigger, className } = props
+  const { title, body, footer, openTrigger } = props
 
   const [open, toggle] = useEventListenerToggle(openTrigger, props.open)
 
   return (
     <div className={renderClassName({ 'fu-modal-overlay': true, open })}>
-      <div className={useClassNameGenerator(className, props, 'fu-modal-content')}>
+      <div className={useClassName(props, { dft: 'fu-modal-content' })}>
         <div className="fu-model-header">
           <h2>{title}</h2>
           <div className="fu-close" onClick={toggle}>
diff --git a/packages/fastui/src/components/table.tsx b/packages/fastui/src/components/table.tsx
index 05e0965c..a2efd4bd 100644
--- a/packages/fastui/src/components/table.tsx
+++ b/packages/fastui/src/components/table.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react'
 import type { JsonData } from './Json'
 
 import { DisplayChoices, asTitle } from '../display'
-import { ClassName, useClassNameGenerator } from '../hooks/className'
+import { ClassName, useClassName } from '../hooks/className'
 import { PageEvent, GoToEvent } from '../hooks/event'
 
 import { DisplayComp } from './display'
@@ -27,10 +27,10 @@ export interface TableProps {
 }
 
 export const TableComp: FC<TableProps> = (props) => {
-  const { className, columns, data } = props
+  const { columns, data } = props
 
   return (
-    <table className={useClassNameGenerator(className, props)}>
+    <table className={useClassName(props)}>
       <thead>
         <tr>
           {columns.map((col, id) => (
diff --git a/packages/fastui/src/hooks/className.ts b/packages/fastui/src/hooks/className.ts
index 49a76513..fc5c14eb 100644
--- a/packages/fastui/src/hooks/className.ts
+++ b/packages/fastui/src/hooks/className.ts
@@ -1,28 +1,48 @@
 import { createContext, useContext } from 'react'
 
-import type { FastProps } from '../components'
+import type { FastClassNameProps } from '../components'
 
 export type ClassName = string | ClassName[] | Record<string, boolean | null> | undefined
 
-export type ClassNameGenerator = (props: FastProps) => ClassName
+export type ClassNameGenerator = (props: FastClassNameProps, subElement?: string) => ClassName
 export const ClassNameContext = createContext<ClassNameGenerator | null>(null)
 
+interface UseClassNameExtra {
+  // default className to use if the class name generator is not set or returns undefined.
+  dft?: ClassName
+  // identifier of the element within the component to generate the class name for.
+  el?: string
+}
+
 /**
- * Generates a `className` from a component.
+ * Generates a `className` from `props`, `classNameGenerator` or the default value.
  *
- * @param classNameProp The `className` taken from the props sent from the backend.
  * @param props The full props object sent from the backend, this is passed to the class name generator.
- * @param dft default className to use if the class name generator is not set or returns undefined.
+ * @param extra dft class name or sub-element
  */
-export function useClassNameGenerator(classNameProp: ClassName, props: FastProps, dft?: ClassName): string {
+export function useClassName(props: FastClassNameProps, extra?: UseClassNameExtra): string | undefined {
   const classNameGenerator = useContext(ClassNameContext)
-  if (combineClassNameProp(classNameProp)) {
-    if (!dft && classNameGenerator) {
-      dft = classNameGenerator(props)
+  let { dft, el } = extra || {}
+
+  if (el) {
+    // if getting the class for a sub-element, we don't care about `props.ClassName`
+    if (classNameGenerator) {
+      const generated = classNameGenerator(props, el)
+      if (generated) {
+        return renderClassName(classNameGenerator(props, el))
+      }
     }
-    return combine(dft, classNameProp)
+    return renderClassName(dft)
   } else {
-    return renderClassName(classNameProp)
+    const { className } = props
+    if (combineClassNameProp(className)) {
+      if (classNameGenerator) {
+        dft = classNameGenerator(props)
+      }
+      return combine(dft, className)
+    } else {
+      return renderClassName(className)
+    }
   }
 }
 
diff --git a/python/fastui/components/forms.py b/python/fastui/components/forms.py
index 9b88fdce..8c1d826a 100644
--- a/python/fastui/components/forms.py
+++ b/python/fastui/components/forms.py
@@ -19,12 +19,14 @@ class BaseFormField(pydantic.BaseModel, ABC, defer_build=True):
     required: bool = False
     error: str | None = None
     locked: bool = False
+    description: str | None = None
     class_name: extra.ClassName | None = None
 
 
 class FormFieldInput(BaseFormField):
     html_type: InputHtmlType = pydantic.Field(default='text', serialization_alias='htmlType')
     initial: str | int | float | None = None
+    placeholder: str | None = None
     type: typing.Literal['FormFieldInput'] = 'FormFieldInput'
 
 
diff --git a/python/fastui/json_schema.py b/python/fastui/json_schema.py
index 6d083007..9e9a1945 100644
--- a/python/fastui/json_schema.py
+++ b/python/fastui/json_schema.py
@@ -164,6 +164,7 @@ def json_schema_field_to_field(
             title=title,
             required=required,
             initial=schema.get('default'),
+            description=schema.get('description'),
         )
     elif schema['type'] == 'string' and (enum := schema.get('enum')):
         enum_display_values = schema.get('enum_display_values', {})
@@ -173,6 +174,7 @@ def json_schema_field_to_field(
             required=required,
             choices=[(v, enum_display_values.get(v) or as_title(v)) for v in enum],
             initial=schema.get('default'),
+            description=schema.get('description'),
         )
     elif schema['type'] == 'string' and schema.get('format') == 'binary':
         return FormFieldFile(
@@ -181,6 +183,7 @@ def json_schema_field_to_field(
             required=required,
             multiple=schema.get('multiple', False),
             accept=schema.get('accept'),
+            description=schema.get('description'),
         )
     else:
         return FormFieldInput(
@@ -189,6 +192,7 @@ def json_schema_field_to_field(
             html_type=input_html_type(schema),
             required=required,
             initial=schema.get('default'),
+            description=schema.get('description'),
         )