How to use @pluralsight/ps-design-system-textinput - 6 common examples

}

    onClear(evt)
  }

  const clearBtn = onClear && 

  const icon = loading ? (
    
  ) : (
    
  )

  return (
    
  )
})

)
  return (
    
  )
}

const SearchInput = props => 
SearchInput.defaultProps = {
  appearance: TextInput.appearances.subtle,
  icon: ,
  placeholder: 'Find Something'
}

const InlineList = ({ children, ...props }) => {
  const styles = {
    list: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center' },
    item: { display: 'inline-flex', margin: '0 5px 12px' }
  }

  return (
    <div style="{styles.list}">
      {React.Children.map(children, (child, index) =&gt; (
        <div style="{styles.item}">
          {child}
        </div></div>

<p>Install the component dependency:</p>
      <code>
        npm install @pluralsight/ps-design-system-textinput
      </code>

      <p>Include a React component in your project:</p>
      <code>
        import TextInput from '@pluralsight/ps-design-system-textinput'
      </code>

      default,
            <span>
              visual style (from <code>TextInput.appearances</code>)
            </span>
          ]),
          PropTypes.row([
            'disabled',
            'boolean',
            null,
            <code>false</code>,
            'standard input disable flag'
          ]),
          PropTypes.row([
            'error',
            'boolean',

'error',
            'boolean',
            null,
            <code>false</code>,
            'error state flag'
          ]),
          PropTypes.row([
            'icon',
            <code>*Icon</code>,
            null,
            null,
            'Icon component'
          ]),
          PropTypes.row([
            'iconAlign',
            PropTypes.union(TextInput.iconAligns),
            null,
            <code>left</code>,
            <span>
              horizontal icon placement (from <code>TextInput.iconAligns</code>)
            </span>
          ]),
          PropTypes.row([
            'label',
            'string',
            null,
            null,
            'identifying string for input'
          ]),
          PropTypes.row([
            'placeholder',
            'string',

>
      
        }
        target={fieldRef}
      >
        }
          onChange={handleInputChange}
          onFocus={handleInputFocus}
          ref={{ field: fieldRef, input: inputRef }}
          value={innerValue}
        />
      
    
  )
})

'placeholder',
            'string',
            null,
            null,
            'in-field usage hint'
          ]),
          PropTypes.row([
            'ref',
            'Ref || { field: Ref,input: Ref, }',
            null,
            null,
            'refs to access underlying elements'
          ]),
          PropTypes.row([
            'size',
            PropTypes.union(TextInput.sizes),
            null,
            <code>medium</code>,
            <span>
              horizontal icon placement (from <code>TextInput.sizes</code>)
            </span>
          ]),
          PropTypes.row([
            'subLabel',
            'string',
            null,
            null,
            'supporting text or error messaging'
          ])
        ]}
      /&gt;
      <p></p>