Order Shipping Address: Same as Billing

2024-05-31

A common checkbox in the order form: we need shipping and billing addresses, but they often are the same. How to hide the fields based on checkbox?

Here's the code of the form in the Resource:

Forms\Components\Section::make('Billing Details')
->columnSpan(1)
->schema([
Forms\Components\TextInput::make('billing_address')
->placeholder('Address')
->hiddenLabel()
->required(),
Forms\Components\TextInput::make('billing_postcode')
->placeholder('Postcode')
->hiddenLabel()
->required(),
Forms\Components\TextInput::make('billing_city')
->placeholder('City')
->hiddenLabel()
->required(),
]),
Forms\Components\Section::make('Shipping Details')
->columnSpan(1)
->schema([
Forms\Components\Checkbox::make('use_billing_address')
->live()
->default(true)
->disabledOn('edit')
->label('Same as billing'),
Forms\Components\Group::make([
Forms\Components\TextInput::make('shipping_address')
->placeholder('Shipping Address')
->hiddenLabel()
->required(),
Forms\Components\TextInput::make('shipping_postcode')
->placeholder('Shipping Postcode')
->hiddenLabel()
->required(),
Forms\Components\TextInput::make('shipping_city')
->placeholder('Shipping City')
->hiddenLabel()
->required(),
])->hidden(fn (Forms\Get $get) => $get('use_billing_address'))
])

The main parts are highlighted:

  1. Checkbox with live()
  2. Group with ->hidden() based on condition

Then, in the table, you may use placeholder() to show "Use billing address" if the shipping address is empty.

Tables\Columns\TextColumn::make('billing_address'),
Tables\Columns\TextColumn::make('shipping_address')
->placeholder('Use billing address'),

A few of our Premium Examples: