# Field Properties

Field based answers types may be customized using following field related properties.

## 📏 Sizing

As the size of the fields is not fixed you may fully customized it using a custom width and height.

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBhEHQX1dJgLFMgYGxh%2F-MBhFu6lfT2Ic4ivQi3-%2Fimage.png?alt=media\&token=1d466aa1-7ff8-4177-a848-e66be525b283)

{% hint style="info" %}
Forcing the width might break the responsive layout on mobile devices, you may consider rather changing the width of fields using [CSS](https://docs.ngsurvey.com/form-management/style-branding/style-editor/css) and setup appropriate sizes based on the respondent's screen width and device (desktop, mobile).  &#x20;
{% endhint %}

## &#x20;🔤 Setting a default text

Each of your fields can be prefilled using a default text. This default text will be set on the field value the first time the survey is displayed to the respondent.&#x20;

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBhHWyAPXIyfmQgq0GD%2F-MBhIr3umJWtJPR116Lx%2Fimage.png?alt=media\&token=0f82f8a9-e5cf-489a-93f8-01e31e28c916)

{% hint style="info" %}
You may also [pipe](https://docs.ngsurvey.com/form-management/form-designer/piping/text-data-piping) in real-time respondent answers from other questions int your field using the [pipe ](https://docs.ngsurvey.com/form-management/form-designer/piping/text-data-piping)icon.
{% endhint %}

## 📄 Watermark Text

The watermark text will be displayed on the field while the field value is empty, it disappears as soon as the respondents enter an answer in the field.

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBhHWyAPXIyfmQgq0GD%2F-MBhJlatkh87bf1Aay37%2Fimage.png?alt=media\&token=88587eb7-3b54-4192-b23b-80d4a701d8cd)

## 🆘 Helper Text

A helper text can be used as hint displayed under the field. You an set the helper text from the [answer properties](https://docs.ngsurvey.com/form-management/form-designer/answers/answer-properties) page.

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBhEHQX1dJgLFMgYGxh%2F-MBhGWSkJHCjfN-iTk0m%2Fimage.png?alt=media\&token=39e9622e-f100-41db-9d76-acb3208d749f)

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBhEHQX1dJgLFMgYGxh%2F-MBhGdt7DP_tE3GaHcRM%2Fimage.png?alt=media\&token=8d1e9aa2-9eba-4d58-9e95-8dbaaf01a5db)

## ⌨️ Input modes

The input mode hints the device on what kind of text might be entered by respondent. This features is handy on devices with virtual keyboards like mobile devices as they adapt their virtual keyboard based on the selected input mode. &#x20;

For example selecting numeric as an input mode would open the mobile device's virtual keyboard with only number keys.&#x20;

![](https://1025048312-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBxUVIo74XmsvfLNhjR%2F-MBxUoqMeQKMFYehwnTV%2Fimage.png?alt=media\&token=80116a27-76ac-4366-b8a0-ab270c16f729)

{% hint style="info" %}
You may check out the official [input mode reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) to learn more about the different modes.
{% endhint %}

### ☑️ Javascript validation <a href="#input-modes" id="input-modes"></a>

Its possible to set the Javascript validation and Validation message property on the [answer properties](https://docs.ngsurvey.com/form-management/form-designer/answers/answer-properties/field-properties) to use custom javascript code to validate your answer. \
\
In the code below respondentAnswerValue will be replaced by the actual value of the field. If the code returns false ngSurvey will block the submit or navigation and show the validation message.

```
return (respondentAnswerValue >= 18 && respondentAnswerValue <= 99);
```

In the code below we are using the getAnswer in the validation context to get a value from another answer in the survey. Here we are looking up an answer with a reporting alias set to "hh\_people".&#x20;

<pre><code><a data-footnote-ref href="#user-content-fn-1">re</a>turn (respondentAnswerValue &#x3C;= validationContext.getAnswer('hh_people'));
</code></pre>

The validation context support following method and properties

```typescript
export class ValidationContext {
   answer:Answer, // Current answer being validated
   question:Question, // Current question of the answer being validated
   questions:Question[], // All survey questions
   answers: Answer[];  // All survey answers

  public getAnswer(id: string): string // Get the value of an answer by looking up its reporting alias or id
  public isSelectedAnswer(id: string, value: string): boolean // Look up a question based on its id or reporting alias and check if the given value is being selected 
}

```

[^1]:
