# code-snippets/3.6.6/js/components/SnippetForm/fields/NameInput.tsx

Code Snippets, version 3.6.6. 29 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.6.6/code/js/components/SnippetForm/fields/NameInput.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.6.6/raw/js/components/SnippetForm/fields/NameInput.tsx
- Modified: 2024-11-27T16:52:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.6.6/code/js/components/SnippetForm/fields/NameInput.tsx#L10-L20`.

```tsx
import React from 'react'
import { __ } from '@wordpress/i18n'
import { useSnippetForm } from '../../../hooks/useSnippetForm'

export const NameInput: React.FC = () => {
	const { snippet, setSnippet, isReadOnly } = useSnippetForm()

	return (
		<div id="titlediv">
			<div id="titlewrap">
				<label htmlFor="title" className="screen-reader-text">
					{__('Name', 'code-snippets')}
				</label>
				<input
					id="title"
					type="text"
					name="snippet_name"
					autoComplete="off"
					value={snippet.name}
					disabled={isReadOnly}
					placeholder={__('Enter title here', 'code-snippets')}
					onChange={event =>
						setSnippet(previous => ({ ...previous, name: event.target.value }))}
				/>
			</div>
		</div>
	)
}

```