Checkout Address Forms
This family renders Woo billing and shipping fields. Field definitions are authored in components, but runtime field rules come from Woo's checkout schema.
When To Use This Family
Use these forms inside CheckoutForm when you want Etch-authored billing and shipping fields that still follow Woo's field schema.
Quick Start
<OmeWooCheckoutForm>
{#slot default}
<OmeWooBillingAddressForm />
<OmeWooShippingAddressForm />
{/slot}
</OmeWooCheckoutForm>
Components
| Component key | Role |
|---|---|
OmeWooBillingAddressForm | Renders billing address fields. |
OmeWooShippingAddressForm | Renders shipping address fields plus the different-shipping toggle. |
Shared Field Props
Both address forms expose the same field-copy pattern:
| Prop | Meaning |
|---|---|
content.legend | Fieldset legend text. |
content.show_legend | Renders or hides the legend. |
{field}.use_woo_defaults | Uses Woo label, hint text, and validation copy. |
{field}.label | Custom label when Woo defaults are disabled. |
| Field hint copy | Custom input hint copy when Woo defaults are disabled. |
{field}.error_message | Custom local validation copy when Woo defaults are disabled. |
accessibility.aria_label | Fieldset accessible label. |
preview.state | Builder preview state. |
Billing includes email and phone. Shipping does not.
Shipping Toggle Props
ShippingAddressForm adds:
| Prop | Meaning |
|---|---|
shipping_toggle.label | Visible toggle label. |
shipping_toggle.use_aria_label | Uses a separate ARIA label when true. |
shipping_toggle.aria_label | Accessible toggle label when enabled. |
shipping_toggle.preview_checked | Builder preview checked state. |
Runtime hides shipping fields until the toggle is checked.
Runtime Field Rules
Runtime applies the Woo schema:
| Rule | Runtime result |
|---|---|
hidden | Field root becomes hidden and controls are disabled. |
required | Field gets data-ome-required, and checkout validation uses it. |
label | Label text is updated unless custom copy is enabled. |
| Field hint copy | Input hint copy is updated unless custom copy is enabled. |
type | Native input type is updated. |
priority | Field roots are sorted by Woo priority. |
autocomplete | Autocomplete token is applied. |
Country and state controls are UIChoice-backed. State can become select, text, or hidden depending on the selected country.
When country or state renders as a select control, the visible trigger stays in the address form and the listbox content may be portaled into the shared UIChoice host. Style the portaled listbox with styling.select_content_class and each option row with styling.select_item_class; fixed host positioning and keyboard behavior remain component-owned runtime CSS.