<Inputs>

The <Inputs> block renders a form to collect user input. Command, Check, and Template blocks use the collected values for variable substitution.

Basic usage

<Inputs id="config">
```yaml
variables:
  - name: ProjectName
    type: string
    description: Name of your project
    validations:
      - required
```
</Inputs>

vs. Template

Inputs and Template both render forms to collect variable values:

Feature	<Inputs>	<Template>
Collects variables	Yes	Yes
Generates files	No	Yes
Button text	“Submit”	“Generate”
Use case	Collect values for other blocks	Generate files from a Boilerplate template directory

Props

Required props

• id (string). Unique identifier for this component. Other blocks reference this ID via inputsId to access the collected values.

Optional props

• path (string). Path to a directory containing a boilerplate.yml file, relative to the runbook. Required unless the block has inline YAML.
• prefilledVariables (object). An object of variable names to values that pre-populate the form fields. These values override any default values defined in the YAML.

Declaring variables

Variables use the Boilerplate variable syntax. Declare them as inline YAML or load them with path. A block takes one or the other.

Inline YAML

Write the variable definitions inside the <Inputs> tags in the style of a boilerplate.yml file, wrapped in a ```yaml code fence:

<Inputs id="user-settings">
```yaml
variables:
  - name: Username
    type: string
    description: Your username
    validations:
      - required
  - name: NotifyByEmail
    type: bool
    description: Receive email notifications
    default: true
```
</Inputs>

The code fence is required. Without it, MDX parses the YAML as Markdown paragraphs and lists and loses its indentation, so the block shows an “Invalid inline boilerplate configuration format” error asking you to wrap the YAML in a code fence.

Loading from a path

Load variables from an external boilerplate.yml file:

<Inputs id="vpc-config" path="templates/vpc" />

This loads variable definitions from templates/vpc/boilerplate.yml relative to your runbook file.

Prefilled variables

Pre-populate form fields with specific values. These override any default values:

<Inputs
    id="aws-config"
    path="templates/aws-settings"
    prefilledVariables={{
        AwsRegion: "us-west-2",
        Environment: "production"
    }}
/>

Using variables in Commands and Checks

Command, Check and Template blocks read the values of an Inputs block through inputsId.

Reference by inputsId

<Inputs id="vpc-config">
```yaml
variables:
  - name: VpcName
    type: string
    description: Name for the VPC
  - name: CidrBlock
    type: string
    description: CIDR block for the VPC
    default: "10.0.0.0/16"
```
</Inputs>

<Command
    id="create-vpc"
    command="aws ec2 create-vpc --cidr-block {{ .inputs.CidrBlock }} --tag-specifications 'ResourceType=vpc,Tags=[{Key=Name,Value={{ .inputs.VpcName }}}]'"
    inputsId="vpc-config"
    title="Create VPC"
    successMessage="VPC {{ .inputs.VpcName }} created!"
/>

Reference multiple Inputs

You can reference multiple Inputs blocks by passing an array of IDs. Variables are merged in order, with later IDs overriding earlier ones:

<Inputs id="global-config">
```yaml
variables:
  - name: Environment
    type: enum
    options: [dev, staging, prod]
    default: dev
```
</Inputs>

<Inputs id="app-config">
```yaml
variables:
  - name: AppName
    type: string
  - name: Port
    type: int
    default: 8080
```
</Inputs>

<Command
    id="deploy"
    path="scripts/deploy.sh"
    inputsId={["global-config", "app-config"]}
    title="Deploy Application"
/>

Embedded in Command or Check

You can embed Inputs directly inside a Command or Check block:

<Command
    id="greet"
    command='echo "Hello, {{ .inputs.Name }}!"'
    title="Say Hello"
>
    <Inputs id="greeting-inputs">
    ```yaml
    variables:
      - name: Name
        type: string
        description: Your name
        validations:
          - required
    ```
    </Inputs>
</Command>

When embedded, the Inputs form renders inline within the parent block without a separate submit button, and the parent can use its variables.

Other blocks can still reference embedded Inputs using the standard inputsId pattern.

Sections

Group related variables under section headers using the x-section extension:

variables:
  - name: FunctionName
    type: string
    description: Name of the Lambda function
    x-section: Basic Configuration

  - name: Runtime
    type: enum
    options: [python3.12, nodejs20.x]
    x-section: Basic Configuration

  - name: MemorySize
    type: int
    description: Memory allocation in MB
    default: 128
    x-section: Advanced Settings

  - name: Timeout
    type: int
    description: Timeout in seconds
    default: 30
    x-section: Advanced Settings

Variables with the same x-section value are grouped together in the form under a section header.

Complete example

# Create a GitHub Repository

Enter your repository settings:

<Inputs id="repo-settings">
```yaml
variables:
  - name: OrgName
    type: string
    description: GitHub organization name
    validations:
      - required
  - name: RepoName
    type: string
    description: Repository name
    validations:
      - required
  - name: Visibility
    type: enum
    description: Repository visibility
    options:
      - private
      - public
    default: private
```
</Inputs>

First, verify you're authenticated to GitHub:

<Check
    id="check-auth"
    command="gh auth status"
    title="Verify GitHub Authentication"
    successMessage="Authenticated to GitHub!"
    failMessage="Not authenticated. Run 'gh auth login' first."
/>

Now create the repository:

<Command
    id="create-repo"
    command='gh repo create "{{ .inputs.OrgName }}/{{ .inputs.RepoName }}" "--{{ .inputs.Visibility }}"'
    inputsId="repo-settings"
    title="Create Repository"
    successMessage="Repository {{ .inputs.OrgName }}/{{ .inputs.RepoName }} created!"
    failMessage="Failed to create repository"
/>

Verify the repository was created:

<Check
    id="verify-repo"
    command='gh repo view "{{ .inputs.OrgName }}/{{ .inputs.RepoName }}"'
    inputsId="repo-settings"
    title="Verify Repository Exists"
    successMessage="Repository verified!"
/>