@publicai-ux/ux-public-forms
v1.0.0
Published
Input field component with enhanced functionality
Readme
Newinput Component
Input field component with enhanced functionality
Installation
npm install @publicai-ux/ux-public-formsComponent Specifications
You can programmatically access the component specifications:
import { Newinput } from '@publicai-ux/ux-public-forms';
console.log(Newinput.getSpecs());Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| className | string | | Additional CSS class names |
| `value` | string | | Input value |
| onChange | function | (value) => {} | Called when input value changes |
| placeholder | string | | Placeholder text |
| `label` | string | | Label text |
| suggestions | array | [] | Array of suggestion items |
| onSuggestionSelect | function | (suggestion) => {} | Called when a suggestion is selected |
| onClearHistory | function | () => {} | Called when clear history is clicked |
| error | string | | Error message to display |
| `comment` | string | | Helper text or comment |
Example Usage
import React, { useState } from 'react';
import { Newinput } from 'Newinput';
function ExampleComponent() {
const [inputValue, setInputValue] = useState('');
const suggestions = [
{ id: '1', text: 'Option 1', context: 'Context 1' },
{ id: '2', text: 'Option 2', context: 'Context 2' }
];
return (
<Newinput
className="custom-class"
value={inputValue}
onChange={setInputValue}
placeholder="Enter text here..."
label="Example Label"
suggestions={suggestions}
onSuggestionSelect={(suggestion) => setInputValue(suggestion.text)}
onClearHistory={() => console.log('History cleared')}
error=""
comment="Additional information about this field"
/>
);
}
export default ExampleComponent;React Usage
import { Newinput } from '@publicai-ux/ux-public-forms';
import '@publicai-ux/ux-public-forms/styles.css';
function App() {
return (
<div>
<h1>My Application</h1>
<Newinput />
</div>
);
}HTML/JS Usage
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="node_modules/@publicai-ux/ux-public-forms/styles.css">
</head>
<body>
<!-- Include the component HTML -->
<div data-component="newinput">
<!-- Component will be inserted here -->
</div>
<!-- Initialize the component -->
<script type="module">
import { initComponents } from '@publicai-ux/ux-public-forms';
// Initialize all components
initComponents();
</script>
</body>
</html>