Built-in Components

Surface provides a set of built-in components that you can use in any project, regardless of the CSS/JS solution you might choose.

Available components

Note: Most of the following components just wrappers around existing Phoenix built-in helpers.

Navigation

  • Link - Generates a hyperlink.
  • LivePatch - Generates a link that will patch the current LiveView.
  • LiveRedirect - Generates a link that will redirect to a new LiveView.

Form

  • Form - Defines a form that lets the user submit information.

  • Field - Defines a form field.

  • Label - Defines a label.

  • Input Controls - A set of common input controls based on the <input> element.

  • TextArea - An input field that let the user enter a multi-line text.

Other

  • #Markdown - A simple macro component that converts markdown into HTML at compile-time.
  • #Raw - A macro component that does not translate any of its contents.