# Block Inputs

Cat

Dog

Walrus

# Block Wrapper

Block inputs should always be contained within the mx-block-wrapper component.

Block Wrappers have a single (optional) attribute of columns which is used to define the number of grid columns to utilise in the layout. Note: these collapse on mobile viewport sizes.

# Block Input (text)

The mx-block-input component is used for standard <input> fields in the Mercury block input designs.

It utilises a similar interface to the mx-input component but also adds the optional colspan attribute to define the number of columns in the block wrapper to span if a value other than 1 is required.

The component emits an mxClear event when the clear button is clicked (in addition to the input event).

The component also provides two slots:

button - for adding a button to the right of the input
label - for adding content to the right of the label

Regular in 2 columns

Regular in 3 columns

Disabled with assistive text

Error

Using the button slot

Button

Using the label slot

<div class="grid grid-cols-1 gap-40">
  <div>
    <strong>Regular in 2 columns</strong>
    <div class="my-20">
      <mx-block-wrapper columns="2">
        <mx-block-input label="Label" placeholder="Placeholder" />
        <mx-block-input label="Label" placeholder="Placeholder" />
      </mx-block-wrapper>
    </div>
    <strong>Regular in 3 columns</strong>
    <div class="my-20">
      <mx-block-wrapper columns="3">
        <mx-block-input label="Label" placeholder="Placeholder" />
        <mx-block-input label="Label" placeholder="Placeholder" />
        <mx-block-input label="Label" placeholder="Placeholder" />
        <mx-block-input label="Label" colspan="2" placeholder="Placeholder" />
        <mx-block-input label="Label" placeholder="Placeholder" />
      </mx-block-wrapper>
    </div>
    <strong>Disabled with assistive text</strong>
    <div class="my-20">
      <mx-block-wrapper>
        <mx-block-input label="Label" assistive-text="Helpful text about input" disabled placeholder="Placeholder" value="This is the value" />
      </mx-block-wrapper>
    </div>
    <strong>Error</strong>
    <div class="my-20">
      <mx-block-wrapper>
        <mx-block-input label="Label" assistive-text="Reason goes here" error placeholder="Placeholder" />
      </mx-block-wrapper>
    </div>
    <strong>Using the button slot</strong>
    <div class="my-20">
      <mx-block-wrapper>
        <mx-block-input label="Label" placeholder="Placeholder">
          <mx-button slot="button" hug small>Button</mx-button>
        </mx-block-input>
      </mx-block-wrapper>
    </div>
    <strong>Using the label slot</strong>
    <div class="my-20">
      <mx-block-wrapper>
        <mx-block-input label="Label" placeholder="Placeholder">
          <i slot="label" class="mds-warning"></i>
        </mx-block-input>
      </mx-block-wrapper>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# mx-block-input

# Properties

Property	Attribute	Description	Type	Default
`assistiveText`	`assistive-text`		`string`	`undefined`
`autofocus`	`autofocus`		`boolean`	`false`
`colspan`	`colspan`	Used to define the number of columns to span in the parent wrapper if more than 1	`number`	`undefined`
`disabled`	`disabled`		`boolean`	`false`
`error`	`error`		`boolean`	`false`
`inputId`	`input-id`	The `id` attribute for the text input	`string`	`undefined`
`label`	`label`	Text for the label element	`string`	`undefined`
`maxlength`	`maxlength`		`number`	`undefined`
`name`	`name`	The `name` attribute for the text input	`string`	`undefined`
`placeholder`	`placeholder`	Placeholder text for the input	`string`	`undefined`
`readonly`	`readonly`		`boolean`	`false`
`type`	`type`	The `type` attribute for the text input	`string`	`'text'`
`value`	`value`		`string`	`undefined`

# Events

Event	Description	Type
`mxClear`	Emitted when the clear button is clicked.	`CustomEvent<void>`

# Dependencies

# Used by

mx-block-search

# Graph

graph TD;
  mx-block-search --> mx-block-input
  style mx-block-input fill:#f9f,stroke:#333,stroke-width:4px

1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

# Block Search

The mx-block-search component is used for search inputs in the Mercury block input designs. It wraps the mx-input component and adds a Search button to the right of the input.

The Search button has a type of button by default, but can be changed to submit by setting the search-button-type. The button also emits an mxSearch event when clicked. If you do not want a Search button, then simply use the mx-block-input component instead, and set its type attribute to "search".

<mx-block-wrapper columns="2">
  <mx-block-search label="Search" placeholder="Name, email..." search-button-type="submit" />
  <mx-block-search label="Search" placeholder="Dog, frog, cat..." value="value goes here" />
</mx-block-wrapper>

1
2
3

# mx-block-search

# Properties

Property	Attribute	Description	Type	Default
`assistiveText`	`assistive-text`		`string`	`undefined`
`autofocus`	`autofocus`		`boolean`	`false`
`colspan`	`colspan`	Used to define the number of columns to span in the parent wrapper if more than 1	`number`	`undefined`
`disabled`	`disabled`		`boolean`	`false`
`error`	`error`		`boolean`	`false`
`inputId`	`input-id`	The `id` attribute for the text input	`string`	`undefined`
`label`	`label`	Text for the label element	`string`	`undefined`
`maxlength`	`maxlength`		`number`	`undefined`
`name`	`name`	The `name` attribute for the text input	`string`	`undefined`
`placeholder`	`placeholder`	Placeholder text for the input	`string`	`undefined`
`readonly`	`readonly`		`boolean`	`false`
`searchButtonType`	`search-button-type`	The `type` attribute for the Search button	`"button" \\| "submit"`	`'button'`
`value`	`value`		`string`	`undefined`

# Events

Event	Description	Type
`mxClear`	Emitted when the clear button is clicked.	`CustomEvent<void>`
`mxSearch`	Emitted when the Search button is clicked. The `CustomEvent.detail` is the value of the input.	`CustomEvent<string>`

# Dependencies

# Depends on

# Graph

graph TD;
  mx-block-search --> mx-block-input
  mx-block-search --> mx-button
  style mx-block-search fill:#f9f,stroke:#333,stroke-width:4px

1
2
3
4

If you are having trouble setting a prop or adding an event listener, refer to this page.

# Block Textarea

The mx-block-textarea component is used for standard <textarea> fields in the Mercury block input designs.

Its interface is similar to mx-block-input, however it does not support the colspan attribute. It will always expand the full width of the block wrapper.

<mx-block-wrapper>
  <mx-block-textarea label="Label" placeholder="Placeholder" />
  <mx-block-textarea disabled label="Label" placeholder="Placeholder" value="'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe." />
  <mx-block-textarea error label="Label" placeholder="Placeholder" assistive-text="Error reason goes here" />
</mx-block-wrapper>

1
2
3
4
5
6
7

# mx-block-textarea

# Properties

Property	Attribute	Description	Type	Default
`assistiveText`	`assistive-text`		`string`	`undefined`
`autofocus`	`autofocus`		`boolean`	`false`
`disabled`	`disabled`		`boolean`	`false`
`error`	`error`		`boolean`	`false`
`label`	`label`	Text for the label element	`string`	`undefined`
`maxlength`	`maxlength`		`number`	`undefined`
`name`	`name`	The `name` attribute for the textarea element	`string`	`undefined`
`placeholder`	`placeholder`	The `placeholder` attribute for the textarea element	`string`	`undefined`
`readonly`	`readonly`		`boolean`	`false`
`textareaId`	`textarea-id`	The `id` attribute for the textarea element	`string`	`undefined`
`value`	`value`		`string`	`undefined`

If you are having trouble setting a prop or adding an event listener, refer to this page.

# Block Select

The mx-block-select component is used for standard <select> fields in the Mercury block input designs. Like other Block Input components, it provides a label slot for additional label content.

Cat

Dog

Walrus

Red

Green

Blue

<div class="grid grid-cols-1 gap-40">
  <div>
    <div class="my-20">
      <mx-block-wrapper columns="2">
        <mx-block-select label="Favorite Animal" placeholder="Please Select">
          <mx-menu-item>Cat</mx-menu-item>
          <mx-menu-item>Dog</mx-menu-item>
          <mx-menu-item>Walrus</mx-menu-item>
        </mx-block-select>
        <mx-block-select label="Favorite Color" placeholder="Please Select" value="Green">
          <mx-menu-item></mx-menu-item>
          <mx-menu-item>Red</mx-menu-item>
          <mx-menu-item>Green</mx-menu-item>
          <mx-menu-item>Blue</mx-menu-item>
        </mx-block-select>
      </mx-block-wrapper>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# mx-block-select

# Properties

Property	Attribute	Description	Type	Default
`assistiveText`	`assistive-text`		`string`	`undefined`
`autofocus`	`autofocus`		`boolean`	`false`
`colspan`	`colspan`	Used to define the number of columns to span in the parent wrapper if more than 1	`number`	`undefined`
`disabled`	`disabled`		`boolean`	`false`
`error`	`error`		`boolean`	`false`
`inputId`	`input-id`	The `id` attribute for the input	`string`	`undefined`
`label`	`label`	Text for the label element	`string`	`undefined`
`name`	`name`	The `name` attribute for the text input	`string`	`undefined`
`placeholder`	`placeholder`	Placeholder text for the input	`string`	`undefined`
`readonly`	`readonly`		`boolean`	`false`
`type`	`type`		`string`	`'text'`
`value`	`value`		`string`	`undefined`

# Dependencies

# Depends on

mx-menu

# Graph

graph TD;
  mx-block-select --> mx-menu
  style mx-block-select fill:#f9f,stroke:#333,stroke-width:4px

1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

# Block File Input

The mx-block-file-input component is used for file inputs in the Mercury block input designs. It emits an mxThumbnailChange event whenever the thumbnail URL changes, which can be used to sync the selected image with other UI elements on the page. Like other Block Input components, it provides a label slot for additional label content.

<mx-block-wrapper columns="2">
  <mx-block-file-input label="Logo" />
  <mx-block-file-input
    readonly
    label="Cover Photo"
    accept-image
  />
  <mx-block-file-input
    disabled
    label="Resume"
    filename="resume.pdf"
    accept-pdf
    assistive-text="(PDF, 10MB max)"
  />
  <mx-block-file-input
    label="Avatar"
    accept-image
    placeholder="No image selected"
    choose-file-text="Browse"
    choose-btn-type="outlined"
    assistive-text="80x80 recommended"
    thumbnail-url="https://picsum.photos/80"
    thumbnail-size="contain"
    filename="avatar.png"
  />
</mx-block-wrapper>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# mx-block-file-input

# Properties

Property	Attribute	Description	Type	Default
`accept`	`accept`	The `accept` attribute for the file input	`string`	`undefined`
`acceptImage`	`accept-image`	For convenience, adds "image/*" to the `accept` string	`boolean`	`false`
`acceptPdf`	`accept-pdf`	For convenience, adds ".pdf" to the `accept` string	`boolean`	`false`
`assistiveText`	`assistive-text`	Assistive text to display next to the label	`string`	`undefined`
`chooseBtnType`	`choose-btn-type`	The `btnType` prop for the Choose File button.	`"action" \\| "contained" \\| "outlined" \\| "simple" \\| "text"`	`'contained'`
`chooseFileText`	`choose-file-text`	The inner text for Choose File button	`string`	`'Choose File'`
`colspan`	`colspan`	Used to define the number of columns to span in the parent wrapper if more than 1	`number`	`undefined`
`disabled`	`disabled`		`boolean`	`false`
`error`	`error`		`boolean`	`false`
`filename`	`filename`	The filename to display. This is useful for previously uploaded files. If provided, the Remove File button is shown.	`string`	`undefined`
`inputId`	`input-id`	The `id` attribute to apply to the input element	`string`	`undefined`
`label`	`label`	Text for the label element	`string`	`undefined`
`name`	`name`	The `name` attribute for the input element	`string`	`undefined`
`placeholder`	`placeholder`	The text to show when no file is selected	`string`	`'No file chosen'`
`readonly`	`readonly`		`boolean`	`false`
`thumbnailSize`	`thumbnail-size`	Sets the thumbnail sizing strategy relative to the container.	`"auto" \\| "contain" \\| "cover" \\| "stretch"`	`'cover'`
`thumbnailUrl`	`thumbnail-url`	The URL for the thumbnail of the currently selected image. If provided, the Remove File button will be shown.	`string`	`undefined`

# Events

Event	Description	Type
`mxThumbnailChange`	Emits the thumbnail url as `CustomEvent.detail` whenever it changes (i.e. after generating a data URI)	`CustomEvent<string>`

# Methods

# `removeFile() => Promise<void>`

# Returns

Type: Promise<void>

# `selectFile() => Promise<void>`

# Returns

Type: Promise<void>

# Dependencies

# Depends on

mx-button

# Graph

graph TD;
  mx-block-file-input --> mx-button
  style mx-block-file-input fill:#f9f,stroke:#333,stroke-width:4px

1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Banners Buttons →

# Block Inputs

# Block Wrapper

# Block Input (text)

# mx-block-input

# Properties

# Events

# Dependencies

# Used by

# Graph

# Block Search

# mx-block-search

# Properties

# Events

# Dependencies

# Depends on

# Graph

# Block Textarea

# mx-block-textarea

# Properties

# Block Select

# mx-block-select

# Properties

# Dependencies

# Depends on

# Graph

# Block File Input

# mx-block-file-input

# Properties

# Events

# Methods

# removeFile() => Promise<void>

# Returns

# selectFile() => Promise<void>

# Returns

# Dependencies

# Depends on

# Graph

# `removeFile() => Promise<void>`

# `selectFile() => Promise<void>`