Input

Implementation: modules/components/atoms/input.liquid

Name (String): my-input

Type (String): text | email | password | search | tel | date | number | hidden

Value (String):

Classes (String):

Variant (String): normal | confirmation | error

Disabled (Boolean): false | true

Required (Boolean): false | true

Attributes (Hash): {}

Placeholder (String): Type here

Variants & examples


name: my-input
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: text
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: email
{"name":"my-input","type":"email","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: password
{"name":"my-input","type":"password","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: search
{"name":"my-input","type":"search","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: tel
{"name":"my-input","type":"tel","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: date
{"name":"my-input","type":"date","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: number
{"name":"my-input","type":"number","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: hidden
{"name":"my-input","type":"hidden","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

variant: normal
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

variant: confirmation
{"name":"my-input","type":"text","value":"","classes":"","variant":"confirmation","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

variant: error
{"name":"my-input","type":"text","value":"","classes":"","variant":"error","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

disabled: true
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":true,"required":false,"attributes":{},"placeholder":"Type here"}

required: true
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":true,"attributes":{},"placeholder":"Type here"}

placeholder: Type here
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}