Field

Creates an interactive PDF form element. Fields are only active in PDF viewers that support AcroForm (Adobe Acrobat, most desktop viewers).

Attributes

Attribute	Type	Default	Description
type	string	—	Required. text checkbox dropdown radio button
name	string	—	Required. Field name in the PDF form
value	string	—	Default value
label	string	—	Visible label (for checkbox, radio, button)
options	string	—	Comma-separated options for dropdown
group	string	—	Radio group name
checked	boolean	false	Initial checked state (checkbox/radio)
required	boolean	false	Mark field as required
readonly	boolean	false	Prevent editing
max-len	integer	—	Maximum text length
action-url	URL	—	Submit URL (button)
width	token/pt	—	Field width
height	pt	—	Field height

Text form

XML

<stack gap="m">
  <stack gap="xs">
    <text font-size="xs" color="#666666">Full name</text>
    <field type="text" name="full_name" width="xl" height="24pt"/>
  </stack>
  <stack gap="xs">
    <text font-size="xs" color="#666666">Email</text>
    <field type="text" name="email" width="xl" height="24pt"/>
  </stack>
  <field type="button" name="submit" label="Submit" action-url="https://example.com/submit"/>
</stack>

Node.js

L.stack({ gap: 'm' }, [
    L.stack({ gap: 'xs' }, [
        L.text({ fontSize: 'xs', color: '#666666' }, ['Full name']),
        L.field({ type: 'text', name: 'full_name', width: 'xl', height: '24pt' }),
    ]),
    L.stack({ gap: 'xs' }, [
        L.text({ fontSize: 'xs', color: '#666666' }, ['Email']),
        L.field({ type: 'text', name: 'email', width: 'xl', height: '24pt' }),
    ]),
    L.field({ type: 'button', name: 'submit', label: 'Submit', actionUrl: 'https://example.com/submit' }),
])

Python

L.stack(StackAttr(gap='m'), [
    L.stack(StackAttr(gap='xs'), [
        L.text(TextAttr(font_size='xs', color='#666666'), ['Full name']),
        L.field(FieldAttr(type='text', name='full_name', width='xl', height='24pt'))
    ]),
    L.stack(StackAttr(gap='xs'), [
        L.text(TextAttr(font_size='xs', color='#666666'), ['Email']),
        L.field(FieldAttr(type='text', name='email', width='xl', height='24pt'))
    ]),
    L.field(FieldAttr(type='button', name='submit', label='Submit', action_url='https://example.com/submit'))
])

PHP

L::stack(new StackAttr(gap: 'm'), [
    L::stack(new StackAttr(gap: 'xs'), [
        L::text(new TextAttr(fontSize: 'xs', color: '#666666'), ['Full name']),
        L::field(new FieldAttr(type: 'text', name: 'full_name', width: 'xl', height: '24pt')),
    ]),
    L::stack(new StackAttr(gap: 'xs'), [
        L::text(new TextAttr(fontSize: 'xs', color: '#666666'), ['Email']),
        L::field(new FieldAttr(type: 'text', name: 'email', width: 'xl', height: '24pt')),
    ]),
    L::field(new FieldAttr(type: 'button', name: 'submit', label: 'Submit', actionUrl: 'https://example.com/submit')),
])

.NET

L.Stack(new() { Gap = "m" }, [
    L.Stack(new() { Gap = "xs" }, [
        L.Text(new() { FontSize = "xs", Color = "#666666" }, ["Full name"]),
        L.Field(new() { Type = "text", Name = "full_name", Width = "xl", Height = "24pt" }),
    ]),
    L.Stack(new() { Gap = "xs" }, [
        L.Text(new() { FontSize = "xs", Color = "#666666" }, ["Email"]),
        L.Field(new() { Type = "text", Name = "email", Width = "xl", Height = "24pt" }),
    ]),
    L.Field(new() { Type = "button", Name = "submit", Label = "Submit", ActionUrl = "https://example.com/submit" }),
])

Checkbox

XML

<flank align="center" gap="s">
  <field type="checkbox" name="agree" value="yes"/>
  <text font-size="s">I agree to the terms and conditions</text>
</flank>

Node.js

L.flank({ align: 'center', gap: 's' }, [
    L.field({ type: 'checkbox', name: 'agree', value: 'yes' }),
    L.text({ fontSize: 's' }, ['I agree to the terms and conditions']),
])

Python

L.flank(FlankAttr(align='center', gap='s'), [
    L.field(FieldAttr(type='checkbox', name='agree', value='yes')),
    L.text(TextAttr(font_size='s'), ['I agree to the terms and conditions'])
])

PHP

L::flank(new FlankAttr(align: 'center', gap: 's'), [
    L::field(new FieldAttr(type: 'checkbox', name: 'agree', value: 'yes')),
    L::text(new TextAttr(fontSize: 's'), ['I agree to the terms and conditions']),
])

.NET

L.Flank(new() { Align = "center", Gap = "s" }, [
    L.Field(new() { Type = "checkbox", Name = "agree", Value = "yes" }),
    L.Text(new() { FontSize = "s" }, ["I agree to the terms and conditions"]),
])

Dropdown

XML

<field type="dropdown" name="country"
       options="United States,Canada,United Kingdom,Australia"
       width="l" height="24pt"/>

Node.js

L.field({ type: 'dropdown', name: 'country', options: 'United States,Canada,United Kingdom,Australia', width: 'l', height: '24pt' })

Python

L.field(FieldAttr(type='dropdown', name='country', options='United States,Canada,United Kingdom,Australia', width='l', height='24pt'))

PHP

L::field(new FieldAttr(type: 'dropdown', name: 'country', options: 'United States,Canada,United Kingdom,Australia', width: 'l', height: '24pt'))

.NET

L.Field(new() { Type = "dropdown", Name = "country", Options = "United States,Canada,United Kingdom,Australia", Width = "l", Height = "24pt" })

Radio group

XML

<stack gap="xs">
  <flank align="center" gap="s">
    <field type="radio" name="plan" group="plan" value="basic" checked="true"/>
    <text font-size="s">Basic</text>
  </flank>
  <flank align="center" gap="s">
    <field type="radio" name="plan" group="plan" value="pro"/>
    <text font-size="s">Pro</text>
  </flank>
</stack>

Node.js

L.stack({ gap: 'xs' }, [
    L.flank({ align: 'center', gap: 's' }, [
        L.field({ type: 'radio', name: 'plan', group: 'plan', value: 'basic', checked: 'true' }),
        L.text({ fontSize: 's' }, ['Basic']),
    ]),
    L.flank({ align: 'center', gap: 's' }, [
        L.field({ type: 'radio', name: 'plan', group: 'plan', value: 'pro' }),
        L.text({ fontSize: 's' }, ['Pro']),
    ]),
])

Python

L.stack(StackAttr(gap='xs'), [
    L.flank(FlankAttr(align='center', gap='s'), [
        L.field(FieldAttr(type='radio', name='plan', group='plan', value='basic', checked='true')),
        L.text(TextAttr(font_size='s'), ['Basic'])
    ]),
    L.flank(FlankAttr(align='center', gap='s'), [
        L.field(FieldAttr(type='radio', name='plan', group='plan', value='pro')),
        L.text(TextAttr(font_size='s'), ['Pro'])
    ])
])

PHP

L::stack(new StackAttr(gap: 'xs'), [
    L::flank(new FlankAttr(align: 'center', gap: 's'), [
        L::field(new FieldAttr(type: 'radio', name: 'plan', group: 'plan', value: 'basic', checked: 'true')),
        L::text(new TextAttr(fontSize: 's'), ['Basic']),
    ]),
    L::flank(new FlankAttr(align: 'center', gap: 's'), [
        L::field(new FieldAttr(type: 'radio', name: 'plan', group: 'plan', value: 'pro')),
        L::text(new TextAttr(fontSize: 's'), ['Pro']),
    ]),
])

.NET

L.Stack(new() { Gap = "xs" }, [
    L.Flank(new() { Align = "center", Gap = "s" }, [
        L.Field(new() { Type = "radio", Name = "plan", Group = "plan", Value = "basic", Checked = "true" }),
        L.Text(new() { FontSize = "s" }, ["Basic"]),
    ]),
    L.Flank(new() { Align = "center", Gap = "s" }, [
        L.Field(new() { Type = "radio", Name = "plan", Group = "plan", Value = "pro" }),
        L.Text(new() { FontSize = "s" }, ["Pro"]),
    ]),
])