How to use @pluralsight/ps-design-system-halo - 8 common examples

const Tag = props => {
  const TagName = props.href ? 'a' : 'div'
  const themeName = useTheme()

  return (
    
      
        <label>{props.children}</label>
        {renderIcon(props)}
      
    
  )
}

return (
    <>
      {isOpen && (
        <div>
      )}
      <label style="">
        {allProps.label &amp;&amp; (
          <div>{allProps.label}</div>
        )}
        <div>
          
            <div>
              <button disabled="{allProps.disabled}">
                <span aria-hidden="">
                  {longestMenuItemState.label || allProps.placeholder}
                </span>
                <span>
                  {selectedLabel || allProps.placeholder}
                </span>
              </button>
              <div></div></div></div></label></div>

const TextArea = (props, context) => {
  const themeName = useTheme()
  const allProps = { ...props, themeName }

  return (
    <label>
      {allProps.label &amp;&amp; (
        <div>{allProps.label}</div>
      )}
      <div>
        
          <textarea style="{{" placeholder="{allProps.placeholder}" disabled="{allProps.disabled}">        &lt;/Halo&gt;
        {allProps.error &amp;&amp; (
          &lt;div {...styles.error(allProps)}&gt;
            &lt;WarningIcon /&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
      {allProps.subLabel &amp;&amp; (</textarea></div></label>

}

  const { className, style, ...rest } = props

  return (
    <label style="{style}">
      {props.label &amp;&amp; (
        <div>{props.label}</div>
      )}

      
        <div>
          

          

          </div></label>

subLabel,
    ...inputProps
  } = allProps

  const { fieldRef, inputRef } = useMultipleRefs(forwardedRef)

  return (
    <label>
      {label &amp;&amp; <div>{label}</div>}

      <div>
        
          <div>
            <input placeholder="{allProps.placeholder}" disabled="{allProps.disabled}">
            {fieldAfter}
          </div>
        

        {icon &amp;&amp; <div>{icon}</div>}

        {error &amp;&amp; (
          <div></div></div></label>

const handleFocus = combineFns(() => {
    setIsFocused(true)
  }, props.onFocus)

  return (
    <button role="checkbox" aria-checked="{checked}">
      
        <div>
          <div>
        </div>
      

      <input type="checkbox" tabindex="-1" readonly="" checked="{checked}">

      {children &amp;&amp; (
        <label>{children}</label></div></button>

if (isFunction(props.onClick)) props.onClick(evt, value)
    props._onFocus(evt, value)

    circleRef.current.focus()
  }

  const { _disabled, _error, _isFocused, _onFocus, _name } = props

  return (
    <label>
      <div>
        
          <div tabindex="-1" aria-checked="{props.checked}" role="radio"> _onFocus(props.value)}
            ref={circleRef}
            {...styles.circle(themeName, props)}
          &gt;
            {props.checked &amp;&amp; <div>}
          </div>
        
      </div></div></label>

if (typeof onCheck === 'function') {
      onCheck(evt, !props.checked, props.value, props.name)
    }

    if (square.current) square.current.focus()
  }

  return (
    <label>
      
        <div tabindex="{props.disabled" role="checkbox" aria-checked="{props.checked}">
          {props.indeterminate &amp;&amp; }
          {props.checked &amp;&amp; !props.indeterminate &amp;&amp; }
        </div>
      

      </label>