class Shared::Field(T)

Overview

This component is used to make it easier to render the same fields styles throughout your app.

Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components

Basic usage:

Renders a text input by default and will guess the label name "Name"

mount Shared::Field, op.name

Call any of the input methods on the block

mount Shared::Field, op.email, &.email_input

Add other HTML attributes

mount Shared::Field, op.email, &.email_input(autofocus: "true")

Pass an explicit label name

mount Shared::Field, op.username, "Your username"

Customization

You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.

div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors, field end

You may also want to have more components if your fields look different in different parts of your app, e.g. CompactField or InlineTextField

Included Modules

Defined in:

components/shared/field.cr

Constant Summary

ASSIGNS = [attribute : Avram::PermittedAttribute(T), label_text : String | ::Nil] of Nil

This component is used to make it easier to render the same fields styles throughout your app.

Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components

Basic usage:

Renders a text input by default and will guess the label name "Name"

mount Shared::Field, op.name

Call any of the input methods on the block

mount Shared::Field, op.email, &.email_input

Add other HTML attributes

mount Shared::Field, op.email, &.email_input(autofocus: "true")

Pass an explicit label name

mount Shared::Field, op.username, "Your username"

Customization

You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.

div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors, field end

You may also want to have more components if your fields look different in different parts of your app, e.g. CompactField or InlineTextField

Constructors

Class Method Summary

Instance Method Summary

Class methods inherited from class BaseComponent

file_location file_location

Constructor Detail

def self.new(attribute : Avram::PermittedAttribute(T), label_text : String | Nil = nil, **unused_exposures) #

This component is used to make it easier to render the same fields styles throughout your app.

Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components

Basic usage:

Renders a text input by default and will guess the label name "Name"

mount Shared::Field, op.name

Call any of the input methods on the block

mount Shared::Field, op.email, &.email_input

Add other HTML attributes

mount Shared::Field, op.email, &.email_input(autofocus: "true")

Pass an explicit label name

mount Shared::Field, op.username, "Your username"

Customization

You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.

div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors, field end

You may also want to have more components if your fields look different in different parts of your app, e.g. CompactField or InlineTextField


Class Method Detail

def self.file_location #

Returns the relative file location to the project root. e.g. src/components/my_component.cr


[View source]

Instance Method Detail

def attribute #

def label_text #

def render(&) #

[View source]
def render #

Use a text_input by default


[View source]