Text Input Elements

Overview

Text input elements capture user-entered text and numbers. Choose the right type based on what you’re collecting—each type provides appropriate validation and UI.

Element	Best For	Validation
`text`	Short text (names, titles)	Length, pattern
`textarea`	Long text (descriptions)	Length
`url`	Web addresses	URL format
`number`	Numeric values	Min/max

Text Input

Single-line text input for short text like usernames, titles, or labels.

Properties

Property	Type	Description
`id`	`string`	Unique identifier (becomes prop name)
`inputType`	`'text'`	Must be `'text'`
`title`	`string`	Field title
`description`	`string`	Help text
`label`	`string`	Input label
`placeholder`	`string`	Placeholder text
`defaultValue`	`string`	Initial value
`validation`	`object`	Validation rules

Validation

Rule	Type	Description
`required`	`boolean`	Field must not be empty
`minLength`	`number`	Minimum characters
`maxLength`	`number`	Maximum characters
`pattern`	`string`	Regex pattern to match

Example

linkapp.config.ts

{
  id: "username",
  inputType: "text",
  title: "Username",
  description: "Your display name",
  label: "Username",
  placeholder: "johndoe",
  defaultValue: "",
  validation: {
    required: true,
    minLength: 3,
    maxLength: 20,
    pattern: "^[a-zA-Z0-9_]+$"  // Alphanumeric and underscores
  }
}

Usage in Layout

app/expanded.tsx

type Settings = {
  username: string;
};

export default function ClassicLayout({ username }: AppProps<Settings>) {
  return <div>Welcome, {username}!</div>;
}

Common Patterns

Display name:

{
  id: "displayName",
  inputType: "text",
  title: "Display Name",
  label: "Name",
  placeholder: "John Doe",
  validation: { required: true, maxLength: 50 }
}

Title or heading:

{
  id: "title",
  inputType: "text",
  title: "LinkApp Title",
  label: "Title",
  placeholder: "Enter a title",
  defaultValue: "My LinkApp",
  validation: { maxLength: 100 }
}

Custom label:

{
  id: "buttonText",
  inputType: "text",
  title: "Button Text",
  label: "Text",
  placeholder: "Click me",
  defaultValue: "Learn More",
  validation: { required: true, maxLength: 30 }
}

Textarea

Multi-line text input for longer content like descriptions or messages.

Properties

Property	Type	Description
`id`	`string`	Unique identifier
`inputType`	`'textarea'`	Must be `'textarea'`
`title`	`string`	Field title
`description`	`string`	Help text
`label`	`string`	Input label
`placeholder`	`string`	Placeholder text
`defaultValue`	`string`	Initial value
`validation`	`object`	Validation rules

Validation

Rule	Type	Description
`required`	`boolean`	Field must not be empty
`minLength`	`number`	Minimum characters
`maxLength`	`number`	Maximum characters

Example

linkapp.config.ts

{
  id: "bio",
  inputType: "textarea",
  title: "Bio",
  description: "Tell users about yourself",
  label: "Your bio",
  placeholder: "I'm a creator who...",
  defaultValue: "",
  validation: {
    maxLength: 500
  }
}

Usage in Layout

app/expanded.tsx

type Settings = {
  bio: string;
};

export default function ClassicLayout({ bio }: AppProps<Settings>) {
  return (
    <div>
      <p className="bio">{bio}</p>
    </div>
  );
}

Common Patterns

Description field:

{
  id: "description",
  inputType: "textarea",
  title: "Description",
  label: "Describe your app",
  placeholder: "This app helps you...",
  validation: { required: true, maxLength: 300 }
}

Custom message:

{
  id: "welcomeMessage",
  inputType: "textarea",
  title: "Welcome Message",
  label: "Message",
  placeholder: "Welcome! Here's what you need to know...",
  validation: { maxLength: 1000 }
}

URL Input

URL input with built-in validation to ensure valid HTTP/HTTPS addresses.

Properties

Property	Type	Description
`id`	`string`	Unique identifier
`inputType`	`'url'`	Must be `'url'`
`title`	`string`	Field title
`description`	`string`	Help text
`label`	`string`	Input label
`placeholder`	`string`	Placeholder URL
`defaultValue`	`string`	Initial URL
`validation`	`object`	Validation rules

Validation

Rule	Type	Description
`required`	`boolean`	Field must not be empty
`pattern`	`string`	Additional regex pattern

URL inputs automatically validate that the value starts with http:// or https://. Use pattern for additional constraints like requiring HTTPS.

Example

linkapp.config.ts

{
  id: "websiteUrl",
  inputType: "url",
  title: "Website URL",
  description: "Your website address",
  label: "Website",
  placeholder: "https://example.com",
  defaultValue: "",
  validation: {
    required: true,
    pattern: "^https://.*"  // Require HTTPS
  }
}

Usage in Layout

app/expanded.tsx

type Settings = {
  websiteUrl: string;
};

export default function ClassicLayout({ websiteUrl }: AppProps<Settings>) {
  return (
    <a href={websiteUrl} target="_blank" rel="noopener">
      Visit Website
    </a>
  );
}

Common Patterns

External link:

{
  id: "externalUrl",
  inputType: "url",
  title: "External Link",
  label: "URL",
  placeholder: "https://example.com",
  validation: { required: true }
}

API endpoint:

{
  id: "apiEndpoint",
  inputType: "url",
  title: "API Endpoint",
  description: "Your API base URL",
  label: "Endpoint",
  placeholder: "https://api.example.com",
  validation: { required: true, pattern: "^https://.*" }
}

Number Input

Numeric input with min/max validation.

Properties

Property	Type	Description
`id`	`string`	Unique identifier
`inputType`	`'number'`	Must be `'number'`
`title`	`string`	Field title
`description`	`string`	Help text
`label`	`string`	Input label
`placeholder`	`number \| string`	Placeholder value
`defaultValue`	`number`	Initial value
`validation`	`object`	Validation rules

Validation

Rule	Type	Description
`required`	`boolean`	Field must not be empty
`min`	`number`	Minimum value (inclusive)
`max`	`number`	Maximum value (inclusive)

Example

linkapp.config.ts

{
  id: "itemCount",
  inputType: "number",
  title: "Number of Items",
  description: "How many items to display",
  label: "Count",
  placeholder: 10,
  defaultValue: 5,
  validation: {
    required: true,
    min: 1,
    max: 100
  }
}

Usage in Layout

app/expanded.tsx

type Settings = {
  itemCount: number;
};

export default function ClassicLayout({ itemCount }: AppProps<Settings>) {
  return (
    <div>
      Showing {itemCount} items
      {Array.from({ length: itemCount }).map((_, i) => (
        <div key={i}>Item {i + 1}</div>
      ))}
    </div>
  );
}

Common Patterns

Item limit:

{
  id: "maxItems",
  inputType: "number",
  title: "Maximum Items",
  label: "Max",
  defaultValue: 10,
  validation: { min: 1, max: 50 }
}

Timeout/duration:

{
  id: "timeoutSeconds",
  inputType: "number",
  title: "Timeout",
  description: "Timeout in seconds",
  label: "Seconds",
  defaultValue: 30,
  validation: { min: 5, max: 300 }
}

Percentage:

{
  id: "opacity",
  inputType: "number",
  title: "Opacity",
  description: "Opacity percentage (0-100)",
  label: "Opacity %",
  defaultValue: 100,
  validation: { min: 0, max: 100 }
}

Complete Example

Here’s a contact form using multiple text input types:

linkapp.config.ts

export default {
  settings: {
    title: "Contact Form",
    elements: [
      {
        id: "formTitle",
        inputType: "text",
        title: "Form Title",
        label: "Title",
        defaultValue: "Get in Touch",
        validation: { required: true, maxLength: 50 },
      },
      {
        id: "description",
        inputType: "textarea",
        title: "Form Description",
        label: "Description",
        placeholder: "We'd love to hear from you...",
        validation: { maxLength: 200 },
      },
      {
        id: "submitUrl",
        inputType: "url",
        title: "Submit URL",
        description: "Where form submissions are sent",
        label: "Endpoint",
        validation: { required: true, pattern: "^https://.*" },
      },
      {
        id: "apiKey",
        inputType: "text",
        title: "API Key",
        description: "Your form service API key",
        placeholder: "Enter your API key",
        label: "Key",
        validation: { required: true, minLength: 20 },
      },
      {
        id: "maxSubmissions",
        inputType: "number",
        title: "Submission Limit",
        description: "Maximum submissions per user",
        label: "Max",
        defaultValue: 1,
        validation: { min: 1, max: 10 },
      },
    ],
  },
};

Validation Error Messages

When validation fails, users see helpful messages:

Rule	Example Error
`required: true`	”This field is required”
`minLength: 3`	”Must be at least 3 characters”
`maxLength: 100`	”Must be at most 100 characters”
`min: 1`	”Must be at least 1”
`max: 100`	”Must be at most 100”
`pattern: '^[a-z]+$'`	”Invalid format”

Add clear description text to help users understand what’s expected and avoid validation errors.

Next Steps

Selection Controls

Select, radio, and checkbox elements

Toggles

Switch and link behavior elements

Advanced Elements

Arrays, integrations, and conditional display

Back to Reference

Return to settings reference overview

Getting Started

Essentials

Overview

Text Input

Properties

Validation

Example

Usage in Layout

Common Patterns

Textarea

Properties

Validation

Example

Usage in Layout

Common Patterns

URL Input

Properties

Validation

Example

Usage in Layout

Common Patterns

Number Input

Properties

Validation

Example

Usage in Layout

Common Patterns

Complete Example

Validation Error Messages

Next Steps

Selection Controls

Toggles

Advanced Elements

Back to Reference

Getting Started

Essentials

​Overview

​Text Input

​Properties

​Validation

​Example

​Usage in Layout

​Common Patterns

​Textarea

​Properties

​Validation

​Example

​Usage in Layout

​Common Patterns

​URL Input

​Properties

​Validation

​Example

​Usage in Layout

​Common Patterns

​Number Input

​Properties

​Validation

​Example

​Usage in Layout

​Common Patterns

​Complete Example

​Validation Error Messages

​Next Steps

Selection Controls

Toggles

Advanced Elements

Back to Reference

Overview

Text Input

Properties

Validation

Example

Usage in Layout

Common Patterns

Textarea

Properties

Validation

Example

Usage in Layout

Common Patterns

URL Input

Properties

Validation

Example

Usage in Layout

Common Patterns

Number Input

Properties

Validation

Example

Usage in Layout

Common Patterns

Complete Example

Validation Error Messages

Next Steps