README

UX Blocks Form

Form domain Twig components: labels, inputs, compounds, and native interaction CSS

Note

Read-only mirror. See CONTRIBUTING.md for how to propose changes.

Features

Seventeen form roles — labels, text controls, toggles, selects, compounds, and form shells
Native-first (nat) — styled with ui-kernel tokens and package CSS; no Stimulus required for default markup
Composition compounds — Field and FloatingField with labelled regions for control, hint, and error text
Toggle button appearance — appearance="button" on Checkbox, Radio, and segmented RadioGroup
Input adornments — icon slots and automatic icons on date/time inputs
Symfony UX Twig components — <twig:Input>, <twig:Field>, <twig:Select>, and siblings
Flex recipe — bundle registration on install
Optional Symfony Form bridge — pair with symfinity/form-ui-extensions-bundle for FormView widgets

button and button-group ship in **symfinity/ux-blocks-core** (used by InputGroup and toggle-button labels).

Interaction profile

Token	In this package
`nat`	Default for all roles — native HTML + ui-kernel / package CSS
`act`	Toggle-button labels use core `Button` chrome; `InputGroup` composes core `Button`
`stl`	Not included — overlay components ship in `symfinity/ux-blocks-extended`
`live`	Not included — LiveComponents ship in separate packages

Component inventory

Role	Twig	Interaction	Fragment	Status
label	Label	nat	`blocks.label`	shipped
input	Input	nat	`blocks.input`	shipped
textarea	Textarea	nat	`blocks.textarea`	shipped
checkbox	Checkbox	nat	`blocks.checkbox`	shipped
radio-group	RadioGroup	nat	`blocks.radio-group`	shipped
select	Select	nat	`blocks.select`	shipped
switch	Switch	nat	`blocks.switch`	shipped
file-input	FileInput	nat	`blocks.file-input`	shipped
input-group	InputGroup	nat	`blocks.input-group`	shipped
fieldset	Fieldset	nat	`blocks.fieldset`	shipped
field	Field	nat	`blocks.field`	shipped
floating-field	FloatingField	nat	`blocks.floating-field`	shipped
range	Range	nat	`blocks.range`	shipped
radio	Radio	nat	`blocks.radio`	shipped
form	Form	nat	`blocks.form`	shipped
form-actions	FormActions	nat	`blocks.form-actions`	shipped
file-upload	FileUpload	nat	`blocks.file-upload`	shipped

Highlights: Select supports multiple and enhanced styling where the browser allows; Range optional value readout; FileUpload combines a button with a filename display; do not wrap Select inside FloatingField; FormActions supports align: start, stretch, or end.

Handbook: docs/components.md.

Prerequisites

Add the symfinity/recipes Flex endpoint to your project's composer.json (see recipes README) — recipes are not in Symfony's official recipe repository yet.

Installation

composer require symfinity/ux-blocks-form

Composer installs symfinity/ux-blocks-core and symfinity/ux-blocks automatically. The Flex recipe registers the bundle for all environments. See Installation for manual setup and verification.

Pair with **symfinity/ui-kernel** when you need theme CSS — see Quick start.

Quick Start

{# templates/base.html.twig — ui-kernel head (recommended) #}
<head>
    {{ ui_kernel_theme_boot_script() }}
    {{ ui_kernel_css()|raw }}
</head>

{# templates/register.html.twig #}
<twig:Form title="Create account" method="post">
    <twig:Field label="Email" hint="We never share your email.">
        <twig:Input name="email" type="email" placeholder="you@example.com" required />
    </twig:Field>
    <twig:Field label="Password">
        <twig:Input name="password" type="password" required />
    </twig:Field>
    <twig:FormActions align="end">
        <twig:Button type="submit">Sign up</twig:Button>
    </twig:FormActions>
</twig:Form>

{# Segmented choice — toggle button appearance #}
<twig:RadioGroup name="plan" appearance="button" variant="primary">
    <twig:Radio value="free" label="Free" checked />
    <twig:Radio value="pro" label="Pro" />
</twig:RadioGroup>

See Quick start for validation states and optional Form bridge pairing.

Documentation

Quick start — first form layout in minutes
Installation — Flex, dependencies, verify
Configuration — optional bundle settings
Components — role index and fragment prefix
Upgrade — first release and future migrations

symfinity/ux-blocks-form

包简介

关键字：

README 文档

README

UX Blocks Form

Form domain Twig components: labels, inputs, compounds, and native interaction CSS

Features

Interaction profile

Component inventory

Prerequisites

Installation

Quick Start

Documentation

Requirements

Support

License

统计信息

GitHub 信息

其他信息