# Input (/docs/netwizard/parameters/input)

> Collect a single line of text or a number, such as a host name or a port, on the NetWizard settings page.

Library: NetWizard

`NetWizardInput` displays a single-line field on the settings page. It holds a value of one type, `String`, `int`, `float` or `double`, and `getValue()` returns that type.

![Input field](https://docs.softt.io/img/netwizard/portal/nw-input.png)

## Constructor

```cpp
template <typename T = String>
NetWizardInput(NetWizard* parent, const char* name, T value = T(),
               const char* placeholder = "", bool required = true);
```

<TypeTable
  type={{
    parent: { type: 'NetWizard*', description: 'NetWizard instance the field is added to.', required: true },
    name: { type: 'const char*', description: 'Label shown above the field.', required: true },
    value: { type: 'T', description: 'Initial value. Its type sets the type of the input.', default: 'T()' },
    placeholder: { type: 'const char*', description: 'Hint shown while the field is empty.', default: '""' },
    required: { type: 'bool', description: 'Whether the user must fill in the field. See [Required and optional fields](/docs/netwizard/parameters#required-and-optional-fields).', default: 'true' },
  }}
/>

The type comes from the initial value, so you rarely need to write it:

```cpp
NetWizardInput host(&NW, "MQTT Host", "", "mqtt.example.com");  // String
NetWizardInput port(&NW, "MQTT Port", 1883);                     // int
NetWizardInput ratio(&NW, "Ratio", 0.5);                         // double
NetWizardInput<float> gain(&NW, "Gain", 1.5f);                   // float, named explicitly
```

## Numeric inputs

`int`, `float` and `double` inputs bring up the number keyboard on phones, and the portal checks the format before sending. The device checks the value again, and rejects the submission if it isn't a valid number for the field, for example `80x` for an `int` input or a number too large for an `int`.

## Methods

### `getValue()`

```cpp
String h = host.getValue();
int p = port.getValue();
```

Returns a copy of the current value, as the input's type.

### `setValue()`

```cpp
host.setValue("broker.example.com");
port.setValue(8883);
```

Sets the value shown in the portal.

See [Settings Fields](/docs/netwizard/parameters#methods) for the methods shared by all fields.

## Example

```cpp title="main.cpp"
#include <WebServer.h>
#include <NetWizard.h>

WebServer server(80);
NetWizard NW(&server);

NetWizardInput host(&NW, "MQTT Host", "", "mqtt.example.com");
NetWizardInput port(&NW, "MQTT Port", 1883);

void setup() {
  Serial.begin(115200);

  NW.onConfig([&]() {
    Serial.printf("MQTT broker: %s:%d\n", host.getValue().c_str(), port.getValue());
    return true;
  });

  NW.autoConnect("NetWizard Demo", "");
  server.begin();
}

void loop() {
  NW.loop();
}
```