MoneyField.java
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[]
CustomFieldSizeVariants.java
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);
}
}
Money.java
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[]
custom-field-size-variants.tsx
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[]
);
}
custom-field-size-variants.ts
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[] -->
`;
}
}