import { Meta } from '@storybook/addon-docs';
import Link from '@cloudscape-design/components/link';

<Meta title="Migration/Input" />

# Migrating from NorthStar legacy - Input

Use <Link href='https://cloudscape.design/components/input' target='_blank' external>Cloudscape Input component </Link>

If the Input is used in a Form setting, it is recommended to 
use <Link href='https://aws.github.io/aws-northstar/?path=/story/components-formrenderer--default' target='_blank' external>NorthStar v2 FormRenderer component</Link> 
to build the form from JSON schema.

## Update Import

```diff
- import Input from 'aws-northstar/components/Input';
+ import Input from '@cloudscape-design/components/input';
```

## Update Code

```diff
export Default = () => {
  const [value, setValue] = React.useState("Hello World");
  return (
    <Input
-     onChange={(value) => setValue(value)}
+     onChange={({ detail }) => setValue(detail.value)}
      value={value}
    />
  );
}
```

export const Component = () => {
  return <SyntaxHighlighter/>;
};