Custom Field Styling

package com.vaadin.demo.component.customfield; import com.vaadin.flow.component.customfield.CustomField; import com.vaadin.flow.component.customfield.CustomFieldVariant; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.select.SelectVariant; import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.component.textfield.TextFieldVariant; // tag::snippet[] public class MoneyField extends CustomField<Money> { private TextField amount; private Select<String> currency; public MoneyField(String label) { this(); setLabel(label); } public MoneyField() { amount = new TextField(); // Sets title for screen readers amount.setAriaLabel("Amount"); currency = new Select<>(); currency.setItems("AUD", "CAD", "CHF", "EUR", "GBP", "JPY", "USD"); currency.setWidth("6em"); currency.setAriaLabel("Currency"); HorizontalLayout layout = new HorizontalLayout(amount, currency); // Removes default spacing layout.setSpacing(false); // Adds small amount of space between the components layout.getThemeList().add("spacing-s"); add(layout); } public void addThemeVariant(CustomFieldVariant variant) { super.addThemeVariants(variant); amount.addThemeVariants(TextFieldVariant.valueOf(variant.name())); currency.addThemeVariants(SelectVariant.valueOf(variant.name())); } @Override protected Money generateModelValue() { return new Money(amount.getValue(), currency.getValue()); } @Override protected void setPresentationValue(Money money) { amount.setValue(money.getAmount()); currency.setValue(money.getCurrency()); } } // end::snippet[]

package com.vaadin.demo.component.customfield; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.router.Route; import com.vaadin.flow.component.customfield.CustomFieldVariant; @Route("custom-field-size-variants") public class CustomFieldSizeVariants extends Div { public CustomFieldSizeVariants() { // tag::snippet[] MoneyField moneyField = new MoneyField("Price"); moneyField.addThemeVariant(CustomFieldVariant.LUMO_SMALL); // end::snippet[] add(moneyField); } }

package com.vaadin.demo.component.customfield; // tag::snippet[] public class Money { private String amount; private String currency; public Money(String amount, String currency) { this.amount = amount; this.currency = currency; } public String getAmount() { return amount; } public void setAmount(String amount) { this.amount = amount; } public String getCurrency() { return currency; } public void setCurrency(String currency) { this.currency = currency; } } // end::snippet[]

import React from 'react'; import { CustomField } from '@vaadin/react-components/CustomField.js'; import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js'; import { Select } from '@vaadin/react-components/Select.js'; import { TextField } from '@vaadin/react-components/TextField.js'; function Example() { return ( // tag::snippet[] <CustomField label="Price" theme="small"> <HorizontalLayout theme="spacing-s"> <TextField accessibleName="Amount" theme="small" /> <Select accessibleName="Currency" items={[ { label: 'AUD', value: 'aud' }, { label: 'CAD', value: 'cad' }, { label: 'CHF', value: 'chf' }, { label: 'EUR', value: 'eur' }, { label: 'GBP', value: 'gbp' }, { label: 'JPY', value: 'jpy' }, { label: 'USD', value: 'usd' }, ]} theme="small" style={{ width: '6em' }} /> </HorizontalLayout> </CustomField> // end::snippet[] ); }

import '@vaadin/custom-field'; import '@vaadin/horizontal-layout'; import '@vaadin/select'; import '@vaadin/text-field'; import { html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { applyTheme } from 'Frontend/demo/theme'; @customElement('custom-field-size-variants') export class Example extends LitElement { protected override createRenderRoot() { const root = super.createRenderRoot(); applyTheme(root); return root; } @state() private currencies = [ { label: 'AUD', value: 'aud' }, { label: 'CAD', value: 'cad' }, { label: 'CHF', value: 'chf' }, { label: 'EUR', value: 'eur' }, { label: 'GBP', value: 'gbp' }, { label: 'JPY', value: 'jpy' }, { label: 'USD', value: 'usd' }, ]; protected override render() { return html` <!-- tag::snippet[] --> <vaadin-custom-field label="Price" theme="small"> <vaadin-horizontal-layout theme="spacing-s"> <vaadin-text-field accessible-name="Amount" theme="small"></vaadin-text-field> <vaadin-select accessible-name="Currency" .items="${this.currencies}" theme="small" style="width: 6em;" ></vaadin-select> </vaadin-horizontal-layout> </vaadin-custom-field> <!-- end::snippet[] --> `; } }