# Shared Controls and Props > Shared Woo props, UIChoice selector modes, class props, preview props, and state attributes. # Shared Controls and Props Several Woo families share the same authoring ideas. These props are shared because the runtime shares behavior, not because they are cosmetic conveniences. ## UIChoice Selectors `AttributeSelector`, `ShippingMethodSelector`, address country/state fields, and `PaymentMethodSelector` all use the shared UIChoice runtime. | Prop | Applies to | Meaning | | --- | --- | --- | | `ui.mode` | Attribute, shipping, payment | Selects the control structure. Supported modes depend on the component. | | `ui.aria_label` | Attribute, shipping, payment | Accessible name on the selector root. | | `ui.default_label` | Select mode selectors | Trigger text before a selected option is resolved. | | `ui.html_tag` | UIChoice components that expose it | Root element tag for authored structure. | Mode behavior: | Mode | Markup and runtime | | --- | --- | | `select` | Renders a trigger and hidden listbox content. Runtime may move content into the shared UIChoice host for positioning. | | `radio` | Renders an in-tree radiogroup with UIChoice indicators. | | `button-radio` | Renders an in-tree radiogroup without the radio indicator. | E2E covers button-radio and select modes for shipping and payment selectors, and select/button-radio modes for variation selection. ## Content Props Content props control visible labels and fallback text: | Prop group | Components | Notes | | --- | --- | --- | | `content.label` | Add-to-cart button, buy-now button, remove buttons, place-order button | Button text; ARIA labels can mirror it. | | `content.successMsg` | Add-to-cart button | Temporary button text after successful add. | | `content.show_price` and `content.price_separator` | Shipping selector | Controls shipping rate label composition. | | `content.show_description` | Payment selector | Removes payment method descriptions when false. | | `content.show_empty_message` and `content.empty_message` | Coupon applied list | Controls the empty coupon message. | | `content.include_attributes` and `content.variant_separator` | Cart item title, order summary | Controls composed variant title text. | ## Structure Props Structure props are for authored HTML semantics, not runtime targeting. | Prop | Applies to | Meaning | | --- | --- | --- | | `structure.root_tag` | `CartItems`, `CartAttributeList`, totals lists | Root wrapper element. | | `structure.item_tag` | `CartItems`, `CartAttributeList` | Row element for item or attribute loops. | | `structure.empty_tag` | `CartItems` | Empty-state wrapper element. | | `structure.html_tag` | Labeled total atoms | Wrapper element when a total atom shows a label. | ## Preview Props Preview props affect deterministic Etch builder output. They do not change live Woo cart or checkout data. | Prop | Applies to | Meaning | | --- | --- | --- | | `preview.rows` | `CartItems`, `CartAttributeList`, `CouponAppliedList` | Number of rows shown in builder preview. | | `preview.empty_state` | `CartItems`, `CouponAppliedList` | Shows the authored empty state in builder preview. | | `preview.show_in_builder` | Cart and checkout notices | Shows a sample notice in builder preview. | | `preview.notice_type` | Cart and checkout notices | Sets the builder notice type sample. | | `preview.state` | Address form fields | Shows idle or error state in builder preview. | | `shipping_toggle.preview_checked` | Shipping address form | Initial builder state for the different-shipping toggle. | ## Class Props Woo components rely heavily on class props so authors can style each atomic part without changing runtime selectors. Runtime selectors use `data-ome-*` attributes. Class props should be treated as styling hooks only. Important shared style groups: | Group | Components | | --- | --- | | UIChoice styles | Attribute selector, shipping selector, payment selector, address country/state controls. | | Control default styles | Coupon input and checkout fields. | | Cart totals styles | `TotalsSubtotal`, `TotalsDiscount`, `TotalsShipping`, `TotalsTax`, `TotalsTotal`. | | Address form field styles | Billing and shipping address forms. | ## State Attributes Woo runtime state is reflected through `data-ome-state`. | State | Common surfaces | | --- | --- | | `idle` | Ready forms, buttons, notice regions without active feedback. | | `loading`, `updating`, `processing` | Checkout store states. | | `success` | Successful add-to-cart, coupon, quantity, remove, and checkout submit actions. | | `error` | Local validation, Store API errors, notice regions. | | `has-items`, `empty` | Cart count, cart items, coupon list, quantity preview. | | `ready`, `hidden`, `text` | Address fields and shipping selector availability. | | `unavailable`, `invalid` | Product purchase forms. |