# `PhiaUi.Components.SpecialEntry` [🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/special_entry.ex#L1) Special entry input components for PhiaUI. Provides compound input widgets for structured data entry: - `verifiable_input/1` + `form_verifiable_input/1` — two fields that must match (confirm email / confirm password). Server validates; second field shows status. - `duration_input/1` + `form_duration_input/1` — HH:MM:SS segmented time entry. - `split_input/1` + `split_input_field/1` — multi-slot inputs that concatenate to one value with auto-advance (PhiaSplitInput hook). - `credit_card_input/1` + `form_credit_card_input/1` — four-panel card form with number formatting and auto-advance (PhiaCreditCard hook). # `credit_card_input` A four-panel credit card entry form: number (4×4 formatted), expiry (MM/YY), CVV, and optional cardholder name. The `PhiaCreditCard` JS hook formats input and auto-advances between fields. ## Attributes * `id` (`:string`) (required) - Root element ID — required for PhiaCreditCard hook. * `card_number_name` (`:string`) - Form field name for the card number. Defaults to `"card_number"`. * `expiry_name` (`:string`) - Form field name for the expiry (MM/YY). Defaults to `"expiry"`. * `cvv_name` (`:string`) - Form field name for the CVV. Defaults to `"cvv"`. * `cardholder_name` (`:string`) - Form field name for the cardholder. Defaults to `"cardholder"`. * `show_cardholder` (`:boolean`) - Show the cardholder name field. Defaults to `true`. * `class` (`:string`) - Additional CSS classes on the root element. Defaults to `nil`. # `duration_input` Renders HH:MM:SS segmented time-duration inputs. Each segment is a constrained number input. A hidden input carries the total seconds for form submission. ## Attributes * `id` (`:string`) - HTML id prefix for the inner inputs. Defaults to `nil`. * `name` (`:string`) - Form field name for the hidden total-seconds input. Defaults to `"duration"`. * `value` (`:any`) - Duration as integer seconds (e.g. `3661`) or "HH:MM:SS" string. Defaults to `0`. * `show_hours` (`:boolean`) - Show the hours field. Defaults to `true`. * `show_seconds` (`:boolean`) - Show the seconds field. Defaults to `true`. * `max_hours` (`:integer`) - Maximum allowed hours value. Defaults to `99`. * `disabled` (`:boolean`) - Disables all fields. Defaults to `false`. * `class` (`:string`) - Additional CSS classes. Defaults to `nil`. # `form_credit_card_input` A labeled wrapper for `credit_card_input/1` matching the form component style. ## Attributes * `id` (`:string`) (required) - Root element ID — required for PhiaCreditCard hook. * `label` (`:string`) - Section label shown above the card form. Defaults to `nil`. * `description` (`:string`) - Helper text. Defaults to `nil`. * `card_number_name` (`:string`) - Card number field name. Defaults to `"card_number"`. * `expiry_name` (`:string`) - Expiry field name. Defaults to `"expiry"`. * `cvv_name` (`:string`) - CVV field name. Defaults to `"cvv"`. * `cardholder_name` (`:string`) - Cardholder name field name. Defaults to `"cardholder"`. * `show_cardholder` (`:boolean`) - Show the cardholder name field. Defaults to `true`. * `class` (`:string`) - Additional CSS classes. Defaults to `nil`. # `form_duration_input` FormField-integrated wrapper for `duration_input/1`. ## Attributes * `field` (`Phoenix.HTML.FormField`) (required) - A Phoenix.HTML.FormField struct. * `label` (`:string`) - Label text. Defaults to `nil`. * `description` (`:string`) - Helper text. Defaults to `nil`. * `show_hours` (`:boolean`) - Show the hours field. Defaults to `true`. * `show_seconds` (`:boolean`) - Show the seconds field. Defaults to `true`. * `max_hours` (`:integer`) - Maximum allowed hours. Defaults to `99`. * `class` (`:string`) - Additional CSS classes. Defaults to `nil`. # `form_verifiable_input` FormField-integrated wrapper for `verifiable_input/1`. Derives names/values from fields; computes `matched` from field values. ## Attributes * `field` (`Phoenix.HTML.FormField`) (required) - Primary form field. * `confirm_field` (`Phoenix.HTML.FormField`) (required) - Confirmation form field. * `label` (`:string`) - Label text shown above the inputs. Defaults to `nil`. * `description` (`:string`) - Helper text. Defaults to `nil`. * `type` (`:atom`) - Input type. Defaults to `:password`. Must be one of `:text`, `:password`, or `:email`. * `placeholder` (`:string`) - Primary placeholder. Defaults to `nil`. * `confirm_placeholder` (`:string`) - Confirmation placeholder. Defaults to `nil`. * `class` (`:string`) - Additional CSS classes. Defaults to `nil`. # `split_input` A multi-slot input that concatenates slot values into one hidden field value. The `PhiaSplitInput` hook handles auto-advance on fill, backspace, and paste. ## Attributes * `id` (`:string`) (required) - Root element ID — required for PhiaSplitInput hook. * `name` (`:string`) - Hidden input name carrying the concatenated value. Defaults to `nil`. * `separator` (`:string`) - String inserted between slot values when joining. Defaults to `""`. * `class` (`:string`) - Additional CSS classes on the container. Defaults to `nil`. ## Slots * `inner_block` (required) - Contains `split_input_field/1` components. # `split_input_field` A single slot within a `split_input/1`. The hook auto-advances on fill and backs up on backspace when empty. ## Attributes * `placeholder` (`:string`) - Placeholder character(s) for the slot. Defaults to `nil`. * `maxlength` (`:integer`) - Maximum number of characters in this slot. Defaults to `1`. * `width` (`:string`) - Tailwind width class for this slot. Defaults to `"w-10"`. * `class` (`:string`) - Additional CSS classes. Defaults to `nil`. # `verifiable_input` Renders two inputs that must match. The second field shows a check (matched), error (mismatch), or nothing (untouched) based on the `matched` attr. ## Attributes * `id` (`:string`) - HTML id prefix for both input elements. Defaults to `nil`. * `type` (`:atom`) - Input type for both fields. Defaults to `:password`. Must be one of `:text`, `:password`, or `:email`. * `name` (`:string`) - Name for the primary input. Defaults to `"value"`. * `confirm_name` (`:string`) - Name for the confirmation input. Defaults to `"confirm_value"`. * `value` (`:string`) - Value for the primary input. Defaults to `""`. * `confirm_value` (`:string`) - Value for the confirmation input. Defaults to `""`. * `matched` (`:boolean`) - Server-computed match status. `nil` = untouched, `true` = match, `false` = mismatch. Defaults to `nil`. * `placeholder` (`:string`) - Placeholder for the primary input. Defaults to `nil`. * `confirm_placeholder` (`:string`) - Placeholder for the confirmation input. Defaults to `nil`. * `size` (`:atom`) - Input size. Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`. * `disabled` (`:boolean`) - Disables both inputs. Defaults to `false`. * `class` (`:string`) - Additional CSS classes on the wrapper. Defaults to `nil`. --- *Consult [api-reference.md](api-reference.md) for complete listing*