Skip to content

Commit 659e1fa

Browse files
committed
[ADD] Support input type
1 parent 87d8ee7 commit 659e1fa

File tree

3 files changed

+45
-1
lines changed

3 files changed

+45
-1
lines changed

README.md

+21
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,27 @@ public function form(Form $form): Form
8989
}
9090
```
9191

92+
93+
## Input type
94+
By default, the input type is set to "number". If you need to change it to "password" or "text", you can use the following methods:
95+
```php
96+
use HasanAhani\FilamentOtpInput\Components;
97+
use Filament\Forms\Form;
98+
99+
public function form(Form $form): Form
100+
{
101+
return $form
102+
->schema([
103+
// ...
104+
OtpInput::make('otp')
105+
->password()
106+
// or
107+
->text()
108+
->label('Otp'),
109+
]);
110+
}
111+
```
112+
92113
## Testing
93114

94115
```bash

resources/views/components/otp-input.blade.php

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
$statePath = $getStatePath();
1515
$numberInput = $getNumberInput();
1616
$isAutofocused = $isAutofocused();
17+
$inputType = $getType();
1718
@endphp
1819

1920
<x-dynamic-component
@@ -31,6 +32,7 @@
3132
state: $wire.$entangle('{{ $getStatePath() }}'),
3233
length: {{$numberInput}},
3334
autoFocus: '{{$isAutofocused}}',
35+
type: '{{$inputType}}',
3436
init: function(){
3537
if (this.autoFocus){
3638
this.$refs[1].focus();
@@ -100,7 +102,7 @@
100102
"
101103
>
102104
<input
103-
type="number"
105+
type="{{$inputType}}"
104106
maxlength="1"
105107
x-ref="{{$column}}"
106108
required

src/Components/OtpInput.php

+21
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ class OtpInput extends Field implements Contracts\CanBeLengthConstrained, Contra
2424
protected int | \Closure | null $numberInput = 4;
2525

2626

27+
protected string | \Closure | null $type = 'number';
28+
29+
2730
public function numberInput(int | \Closure $number = 4):static
2831
{
2932
$this->numberInput = $number;
@@ -35,4 +38,22 @@ public function getNumberInput():int
3538
return $this->evaluate($this->numberInput);
3639
}
3740

41+
42+
public function password(): static
43+
{
44+
$this->type = 'password';
45+
return $this;
46+
}
47+
48+
public function text(): static
49+
{
50+
$this->type = 'text';
51+
return $this;
52+
}
53+
54+
public function getType(): string
55+
{
56+
return $this->evaluate($this->type);
57+
}
58+
3859
}

0 commit comments

Comments
 (0)