Skip to content

docs: move custom-field size variants to styling page #4859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
web-padawan merged 4 commits into from
Dec 2, 2025
Merged

docs: move custom-field size variants to styling page #4859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca7698d
refactor: move custom-field size variants to styling page
web-padawan Dec 1, 2025
71ebfad
docs: add table with all supported variants
web-padawan Dec 1, 2025
7953787
docs: tweak the style variants table
web-padawan Dec 1, 2025
98cb585
Merge branch 'main' into refactor/move-custom-field-styling
web-padawan Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 0 additions & 40 deletions articles/components/custom-field/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,44 +250,4 @@ endif::[]
--


== Size Variants

The small theme variant can be used to make Custom Field's label, helper, and error message smaller. Custom Field doesn't propagate its theme variant to its internal components. Each internal component's theme variant must be set individually.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/custom-field/custom-field-size-variants.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/customfield/MoneyField.java[tags=snippet,indent=0,group=Flow]
----

[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/customfield/CustomFieldSizeVariants.java[render,tags=snippet,indent=0,group=Flow]
----

[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/customfield/Money.java[tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/custom-field/react/custom-field-size-variants.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--


[discussion-id]`CB7FDF39-7653-4DF0-A0C0-9C2A2EE7EDBA`
61 changes: 61 additions & 0 deletions articles/components/custom-field/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,67 @@ order: 50
---
= Custom Field Styling


== Style Variants

The following variants are supported:

[cols="1,2,1"]
|===
| Variant | Description | Supported by

|`small`
|Used to make label, helper, and error message smaller
|Lumo

|`helper-above-field`
|Used to position the helper above the field, and below the label
|Aura, Lumo

|`whitespace`
|Adds padding below the label for wrapping components without outer margin
|Lumo

|===

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/custom-field/custom-field-size-variants.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/customfield/MoneyField.java[tags=snippet,indent=0,group=Flow]
----

[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/customfield/CustomFieldSizeVariants.java[render,tags=snippet,indent=0,group=Flow]
----

[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/customfield/Money.java[tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/custom-field/react/custom-field-size-variants.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

[NOTE]
Custom Field doesn't propagate its style variant to the individual field components it wraps. Each individual component's style variant must be set individually.

include::../_styling-section-intros.adoc[tag=selectors]


Expand Down