> ## Documentation Index
> Fetch the complete documentation index at: https://docs.linktr.ee/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Input Elements

> Text, textarea, URL, and number 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

```ts linkapp.config.ts theme={"system"}
{
  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

```tsx app/expanded.tsx theme={"system"}
type Settings = {
  username: string;
};

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

### Common Patterns

**Display name:**

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

**Title or heading:**

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

**Custom label:**

```ts theme={"system"}
{
  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

```ts linkapp.config.ts theme={"system"}
{
  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

```tsx app/expanded.tsx theme={"system"}
type Settings = {
  bio: string;
};

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

### Common Patterns

**Description field:**

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

**Custom message:**

```ts theme={"system"}
{
  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 |

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

### Example

```ts linkapp.config.ts theme={"system"}
{
  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

```tsx app/expanded.tsx theme={"system"}
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:**

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

**API endpoint:**

```ts theme={"system"}
{
  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

```ts linkapp.config.ts theme={"system"}
{
  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

```tsx app/expanded.tsx theme={"system"}
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:**

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

**Timeout/duration:**

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

**Percentage:**

```ts theme={"system"}
{
  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:

```ts linkapp.config.ts theme={"system"}
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"                 |

<Tip>
  Add clear `description` text to help users understand what's expected and
  avoid validation errors.
</Tip>

## Next Steps

<CardGroup cols={2}>
  <Card title="Selection Controls" icon="list-check" href="/essentials/settings/selections">
    Select, radio, and checkbox elements
  </Card>

  <Card title="Toggles" icon="toggle-on" href="/essentials/settings/toggles">
    Switch and link behavior elements
  </Card>

  <Card title="Advanced Elements" icon="layer-group" href="/essentials/settings/advanced">
    Arrays, integrations, and conditional display
  </Card>

  <Card title="Back to Reference" icon="arrow-left" href="/essentials/settings-reference">
    Return to settings reference overview
  </Card>
</CardGroup>