Input Wrapper Blade

I have this code

<x-filament::input.wrapper>
            <x-slot name="prefix">
                <x-filament::input
                    type="text"
                    wire:model="text1"
                />
            </x-slot>

            <x-filament::input
                type="text"
                wire:model="text2"
            />

            <x-slot name="suffix">
                Text1/Text2
            </x-slot>
</x-filament::input.wrapper>

How could I transform this to move the Text1/Text2 in between inputs? Or any other alternative solution? Thanks

1 Reply

Andrew Wallo•12mo ago

I would just use custom html for something like this And just style it to look “filamenty” Or I guess you could instead of using suffix or prefix just put 2 inputs inside the wrapper with a supposed “infix” (like the text in the middle). ChatGPT gave me this. You can do with it as you please.

<!DOCTYPE html>
<html>
<head>
<style>
  .input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 5px;
  }

  .input-wrapper input {
    border: none;
    outline: none;
    padding: 5px;
  }

  .middle-text {
    margin: 0 10px;
  }
</style>
</head>
<body>

<div class="input-wrapper">
  <input type="text" id="input1" placeholder="Text 1">
  <span class="middle-text">/</span>
  <input type="text" id="input2" placeholder="Text 2">
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  .input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 5px;
  }

  .input-wrapper input {
    border: none;
    outline: none;
    padding: 5px;
  }

  .middle-text {
    margin: 0 10px;
  }
</style>
</head>
<body>

<div class="input-wrapper">
  <input type="text" id="input1" placeholder="Text 1">
  <span class="middle-text">/</span>
  <input type="text" id="input2" placeholder="Text 2">
</div>

</body>
</html>

Gaming

Programming

Input Wrapper Blade