# Textbox

A textbox lets users enter and edit text.

## Textbox

![](https://427210397-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MAgA8lkflyE8DVzEwHy%2F-MAgBzsgtqe5tt4bvUUn%2Fimage.png?alt=media\&token=5de8a488-7b18-4f3a-aaa7-9c87b380925f)

```powershell
New-UDTextbox -Label 'Standard' -Placeholder 'Textbox'
New-UDTextbox -Label 'Disabled' -Placeholder 'Textbox' -Disabled
New-UDTextbox -Label 'Textbox' -Value 'With value'
```

## Password Textbox

A password textbox will mask the input.

![](https://427210397-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MAgA8lkflyE8DVzEwHy%2F-MAgC1c_frWpotzS1xuD%2Fimage.png?alt=media\&token=4e07ab3e-3000-4b1a-a31f-39606006831d)

```powershell
New-UDTextbox -Label 'Password' -Type password
```

## Multiline

You can create a multiline textbox by using the `-Multiline` parameter. Pressing enter will add a new line. You can define the number of rows and the max number of rows using `-Rows` and `-RowsMax`.

```powershell
New-UDTextbox -Multiline -Rows 4 -RowsMax 10
```

## Interaction

### Retrieving a textbox value

You can use `Get-UDElement` to get the value of a textbox

```powershell
New-UDTextbox -Id 'txtExample' 
New-UDButton -OnClick {
    $Value = (Get-UDElement -Id 'txtExample').value 
    Show-UDToast -Message $Value
} -Text "Get textbox value"
```

### Setting the textbox value

```powershell
New-UDTextbox -Id 'txtExample' -Label 'Label' -Value 'Value'

New-UDButton -OnClick {

    Set-UDElement -Id 'txtExample' -Properties @{
        Value = "test123"
    }

} -Text "Get textbox value"
```

## Icons

You can set the icon of a textbox by using the `-Icon` parameter and the `New-UDIcon` cmdlet.

```powershell
New-UDTextbox -Id "ServerGroups" -Icon (New-UDIcon -Icon 'server') -Value "This is my server"
```

![](https://427210397-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MFet2aaAIlDdZlcNalk%2F-MFetKRtd-x_KM6aShI9%2Fimage.png?alt=media\&token=a8ae6823-413e-4190-b874-6b05dcf9cbaa)

## Mask

The textbox mask is accomplished using react-imask. You can specify RegEx and pattern matching. 

* [Pattern Mask](https://imask.js.org/guide.html#masked-pattern)
* [RegEx Mask](https://imask.js.org/guide.html#masked-base)

This example creates a mask for US based phone numbers.

```powershell
New-UDTextbox -Mask "+1 (000) 000-0000"
```

![](https://427210397-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MKH_CteFYMdPumnOe4I%2F-MKH_lM-fa5MD5UMZqzv%2Fimage.png?alt=media\&token=31b754cd-8e25-4d98-81da-a22f7277d47f)

### Unmasking 

The default behavior of `-Mask` is to return the masked value in forms and `Get-UDElement`. You can return the unmasked value by specifying the `-Unmask` parameter. 

```powershell
New-UDTextbox -Mask "+1 (000) 000-0000" -Unmask
```

## OnEnter

The `-OnEnter` event handler is executed when the user presses enter in the text field. It is useful for performing other actions, like clicking a button, on enter. 

```powershell
New-UDTextbox -OnEnter {
    Invoke-UDEndpoint -Id 'submit'
}

New-UDButton -Id 'submit' -OnClick {
    Show-UDToast -Message 'From Textbox'
}
```

## OnBlur

The `-OnBlur` event handler is executed when the textbox loses focus. 

```powershell
New-UDTextbox -OnBlur {
    Show-UDToast "Blurred"
}
```

## OnValidate

Use the `-OnValidate` event handler to validate input typed in the textbox.

```powershell
New-UDTextbox -OnValidate {
    if ($EventData.Length -lt 10)
    {
        New-UDValidationResult -ValidationError 'String needs to be longer than 10'
    }
}
```

## API

[New-UDTextbox](https://github.com/ironmansoftware/universal-docs/blob/master/cmdlets/New-UDTextbox.txt)