Input - Semantic UI

element Input <ui-input> {

// A menu displays grouped navigation actions

// export Input

types { // 1 { … }

search : boolean // can be formatted to appear as a search

}

content { // 3 { … }

placeholder : boolean // include placeholder text

icon : boolean [→ ui-icon] // include an icon

label : boolean // include a label

}

states { // 4 { … }

hover : boolean // be hovered

focus : boolean // be focused by the keyboard

active : boolean // be activated

disabled : "disabled" | "clickable" [compound] // have interactions disabled

"disabled" — disable interactions

"clickable" — allow interactions but appear disabled

}

variations { // 2 { … }

fluid : boolean // take the width of its container

"mini" — appear extremely small

"tiny" — appear very small

"small" — appear small

"medium" — appear normal sized

"large" — appear larger than normal

"big" — appear much larger than normal

"huge" — appear very much larger than normal

"massive" — appear extremely larger than normal

}

settings { // 6 { … }

name : string // can specify the form field name

type : string = "text" // can specify the form html input type

debounced : boolean = false // can specify the input value should be debounced

debounce-interval : number = 150 // can specify the input debounce interval in milliseconds

clearable : string // can show an icon to reset the inputted value

value : string // can specify a value to store

}

import {
  getStates,
  getVariations,
} from '@semantic-ui/specs';

export default {
  uiType: 'element',
  name: 'Input',
  description: 'A menu displays grouped navigation actions',
  tagName: 'ui-input',
  exportName: 'Input',
  content: [
    {
      name: 'Placeholder',
      attribute: 'placeholder',
      description: 'include placeholder text',
      exampleCode: `<ui-input placeholder="Search..."></ui-input>`,
    },
    {
      name: 'Icon',
      includeAttributeClass: true,
      attribute: 'icon',
      couplesWith: ['ui-icon'],
      description: 'include an icon',
      exampleCode: `<ui-input icon="search"></ui-input>`,
    },
    {
      name: 'Label',
      includeAttributeClass: true,
      attribute: 'label',
      description: 'include a label',
      exampleCode: `<ui-input label="ctrl+k"></ui-input>`,
    },
  ],
  types: [
    {
      name: 'Search',
      attribute: 'search',
      description: 'can be formatted to appear as a search',
      exampleCode: `<ui-input search></ui-input>`,
    },
  ],
  states: getStates(['hover', 'focus', 'active', 'disabled']),
  variations: [
    ...getVariations(['fluid', 'size']),
  ],
  events: [
    {
      eventName: 'change',
      description: 'occurs after the value changes',
      arguments: [
        {
          name: 'value',
          description: 'the updated value',
        },
      ],
    },
  ],
  settings: [
    {
      name: 'Name',
      type: 'string',
      attribute: 'name',
      description: 'can specify the form field name',
    },
    {
      name: 'Type',
      type: 'string',
      attribute: 'type',
      defaultValue: 'text',
      description: 'can specify the form html input type',
    },
    {
      name: 'Debounced',
      type: 'boolean',
      attribute: 'debounced',
      defaultValue: false,
      description: 'can specify the input value should be debounced',
    },
    {
      name: 'Debounce Interval',
      type: 'number',
      attribute: 'debounce-interval',
      defaultValue: 150,
      description: 'can specify the input debounce interval in milliseconds',
    },
    {
      name: 'Clearable',
      type: 'string',
      attribute: 'clearable',
      description: 'can show an icon to reset the inputted value',
    },
    {
      name: 'Value',
      type: 'string',
      attribute: 'value',
      description: 'can specify a value to store',
    },
  ],
  examples: {
    defaultAttributes: {},
    defaultContent: '',
  },
};

{ "uiType": "element", "name": "Input", "description": "A menu displays grouped navigation actions", "tagName": "ui-input", "exportName": "Input", "content": [ { "name": "Placeholder", "attribute": "placeholder", "description": "include placeholder text", "exampleCode": "<ui-input placeholder=\"Search...\"></ui-input>" }, { "name": "Icon", "includeAttributeClass": true, "attribute": "icon", "couplesWith": [ "ui-icon" ], "description": "include an icon", "exampleCode": "<ui-input icon=\"search\"></ui-input>" }, { "name": "Label", "includeAttributeClass": true, "attribute": "label", "description": "include a label", "exampleCode": "<ui-input label=\"ctrl+k\"></ui-input>" } ], "types": [ { "name": "Search", "attribute": "search", "description": "can be formatted to appear as a search", "exampleCode": "<ui-input search></ui-input>" } ], "states": [ { "name": "Hover", "attribute": "hover", "description": "be hovered" }, { "name": "Focus", "attribute": "focus", "description": "be focused by the keyboard" }, { "name": "Active", "attribute": "active", "description": "be activated" }, { "name": "Disabled", "attribute": "disabled", "includeAttributeClass": true, "compoundAliases": true, "description": "have interactions disabled", "options": [ { "name": "Disabled", "value": "disabled", "description": "disable interactions" }, { "name": "Clickable Disabled", "value": "clickable", "description": "allow interactions but appear disabled" } ] } ], "variations": [ { "name": "Fluid", "attribute": "fluid", "usageLevel": 1, "description": "take the width of its container" }, { "name": "Size", "attribute": "size", "usageLevel": 1, "description": "vary in size", "options": [ { "name": "Mini", "value": "mini", "description": "appear extremely small" }, { "name": "Tiny", "value": "tiny", "description": "appear very small" }, { "name": "Small", "value": "small", "description": "appear small" }, { "name": "Medium", "value": "medium", "description": "appear normal sized" }, { "name": "Large", "value": "large", "description": "appear larger than normal" }, { "name": "Big", "value": "big", "description": "appear much larger than normal" }, { "name": "Huge", "value": "huge", "description": "appear very much larger than normal" }, { "name": "Massive", "value": "massive", "description": "appear extremely larger than normal" } ] } ], "events": [ { "eventName": "change", "description": "occurs after the value changes", "arguments": [ { "name": "value", "description": "the updated value" } ] } ], "settings": [ { "name": "Name", "type": "string", "attribute": "name", "description": "can specify the form field name" }, { "name": "Type", "type": "string", "attribute": "type", "defaultValue": "text", "description": "can specify the form html input type" }, { "name": "Debounced", "type": "boolean", "attribute": "debounced", "defaultValue": false, "description": "can specify the input value should be debounced" }, { "name": "Debounce Interval", "type": "number", "attribute": "debounce-interval", "defaultValue": 150, "description": "can specify the input debounce interval in milliseconds" }, { "name": "Clearable", "type": "string", "attribute": "clearable", "description": "can show an icon to reset the inputted value" }, { "name": "Value", "type": "string", "attribute": "value", "description": "can specify a value to store" } ], "examples": { "defaultAttributes": {}, "defaultContent": "" } }