Common Airtable field properties
This article describes common properties available to all Airtable fields, which you can edit in the web editor’s UI, but also shows how the same properties can be used dynamically with JavaScript.
Airtable Field
Name
This is the internal name of the field that is provided by Airtable and can’t be changed.
JavaScript
Copy the field’s name to access the field from JavaScript:
fd.rendered(() => {
// set the field's title using it's name
fd.field('FieldName').title = 'Last Name';
});
Title
This is the title of the field that is provided by Airtable. To change it, modify the corresponding column name in Airtable.
General
Title
Specify text of the title that will appear next to the field.
Can also toggle Title’s visibility on/off:
Title can be changed directly on the form after a double click:
JavaScript
This code will allow you to get or set the field’s title dynamically:
// get the field's title as a string
fd.field('Text1').title
// set the field's title
fd.field('Text1').title = 'Last Name';
Hint
Defines a placeholder text that appears in the input before a user starts typing:
This property is available for Single-line Text, Multi-line Text, Number, Drop Down, Date, Date and Time fields.
JavaScript
This code will allow you to get or set the field’s placeholder text dynamically:
// set the field's Hint
fd.field('FieldName').placeholder = 'Enter your name';
Description
Add a description to the field.
It would appear as small text right under the field.
JavaScript
This code will allow you to get or set the field’s description dynamically:
// get the field's description as a string
fd.field('Text1').description
// set the field's description
fd.field('Text1').description = 'New description';
Read-only
Select if the field will read-only or not. Read-only fields display their value as plain text and don’t allow modifying it.
Required
Select if the field will be required to submit the form or not.
Required status can also be changed directly on the form via the Asterisk button:
JavaScript
This code will allow you to get and set field’s required status
// get the field's required status as true/false
fd.field('Text1').required;
// set the field's required status
fd.field('Text1').required = true;
Layout
Select if the title will appear to the left of the field, or right above it.
Layout can also be changed directly in the context menu of the selected field:
Class
Add a CSS class to the field, which comes in handy with CSS or even JavaScript code. This will work like class attribute for an HTML tag.
Same class can be applied to multiple fields, and then you can use CSS to modify the appearance of these fields. For example, here we’ve used the following CSS code in CSS editor to give fields with my-class a blue background, white text and rounded corners, with a little bit of padding:
.my-class { color: #FFFFFF; padding: 10px; background-color: #1E90FF; border-radius: 30px; }
To access this propery, click the “More options” bar at the bottom of General.
Style
Add custom CSS style to the field. This will work like style attribute for an HTML tag.
This style will allow you to hide the field, making it invisible to user (but still usable with JavaScript):
display: none;
You can also apply different styles to it. For example, the following style will allow you to add a thin gray border around the field:
padding: 10px; border: 1px solid #CED4DA;
To access this propery, click the “More options” bar at the bottom of General.
Title
Font
Specify the following font parameters for the field’s title:
font size:
font style font style (Normal, Bold or Italic):
font color (use the color picker or enter a Hex color code):
Wrap
Select if the title’s text should wrap in multiple lines when there is not enough space, or just be shortened until it fits (with dots… at the end).
